이 작업을 하는 사람이 있습니까? filter 태그를 구현하고 싶습니다.

preserveAspectRatio 도 누락된 것 같습니다: http://jsfiddle.net/jonase/kb3gN/3025/

이에 대한 PR을 생성해야 합니까, 아니면 누락된 모든 속성/태그를 먼저 수집하고 나중에 단일 패치를 생성하는 것을 선호합니까?

[편집] reservedAspectRatio가 커밋에 추가되었습니다. https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054

안녕.

marker* 속성은 위에서 언급한 #1738의 @cassus 덕분에 추가되었습니다.

관련 <marker> SVG 요소를 추가하는 것은 어떻습니까?
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

나도 이게 필요하다는 걸 이제서야 깨달았다. 여기에 대한 좋은 개요가 있습니다. http://tutorials.jenkov.com/svg/marker-element.html

이 "1인이 필요로 하는 대로 여기저기에 임의의 요소와 속성을 추가"하는 접근 방식은 불가능합니다. 따라서 우리는 모든 것을 지원하거나 아예 지원하지 않아야 합니다.

나는 http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html 을 _거의_ 모든 것(네임스페이스 속성은 제외)을 스크랩하고 다음을 생각해 냈습니다. https://github.com/zpao/ 반응/비교/fuck-svg.

그러나 그것은 축소된 빌드에 ~2kb를 추가하고(클로저 컴파일러로 잘 부서지지만) 지금은 그 크기를 늘리고 싶지 않습니다. 우리는 별도의 SVG 빌드를 수행하는 것에 대해 이야기했습니다. 또는 애드온으로 별도로 배송합니다.

@zpao 맞습니다. 완전한 SVG 지원은 애드온이 될 수 있습니다. 그렇게 하려면 감가상각 경고를 설정하여 예를 들어 React.DOM.circle이 React.SVG.circle이 되는 것을 알려야 합니다.

React.SVG.circle의 경우 +1

@zpao
완전한 SVG 애드온은 좋은 접근 방식처럼 들립니다. 많은 프로젝트에는 SVG가 필요하지 않으므로 코드에 무게를 두어서는 안 됩니다. 다른 프로젝트는 지원이 필요하며 절반만 지원하는 것은 이치에 맞지 않습니다.

+1

2069는 이미지 지원을 요청합니다.

이미지 지원 +1

이미지 지원도 +1

<use> 지원에 +1. 우리는 sv 아이콘 세트에 그것을 사용하고 있습니다. 우리는 그것을 작동시키기 위해 dangerouslySetHTML 를 시도하고 있지만, 이벤트 버블링은 작동하지 않습니다.

strokeDashoffset 누락 다음과 같이 진행률 표시줄에 사용하고 싶습니다. http://codepen.io/JMChristensen/pen/Ablch

strokeDashoffset 대해 +1

또한 진행률 표시줄에 사용하고 싶습니다.

<text> 작업할 때 alignment-baseline 가) 누락되었습니다.

아마도 누군가가 http://www.w3.org/TR/SVG/Overview.html을 통해 트롤링하여 모든 속성과 속성을 얻을 의지가 있습니까? (이 목적을 위해 더 나은 URL이 있을 수 있지만 확실하지 않습니다...)

또 다른 도움은 소스 코드와 테스트에서 이것을 변경할 위치를 아는 것입니다. 그래야 반응할 커밋을 더 쉽게 만들 수 있습니다.

FWIW, 대부분의 속성은 여전히 ​​스타일 속성을 사용하여 적용할 수 있습니다.

<path style={{strokeDashoffset: 100}} />

@syranide 제가 그렇게 했습니다(수동으로 하는 것은 미친 짓이기 때문에 대부분 자동화됨) - https://github.com/zpao/react/compare/fuck-svg. 이미 병합되지 않은 이유에 대한 이전 의견을 참조하십시오.

@ThomasDeutsch 이전 SVG 관련 pull 요청 대부분을 참조하세요. 즉, 하나씩 추가하는 것보다 계획을 파악하는 것이 좋습니다(이전 의견도 안내해 드리겠습니다).

+1 for textPath - 현재 작업 중인 프로젝트에 필요하며 지금은 불쾌한 솔루션을 해킹하고 있습니다. React SVG 플러그인 팩 구현에 기여하고 싶습니다.

:+1: 전체 SVG 추가 기능의 경우. 언제 배송될 지에 대한 견적이 있습니까?

외래 개체에 대해 +1

외래 개체에 대해 +1

svg 스프라이트를 사용하기 위한 속성 xlink:href .

<use> 지원 +1

현재 이 문제를 해결하기 위해 https://www.npmjs.org/package/react-inlinesvg 를 사용하고 있습니다.

속성: maskUnits 및 maskContentUnits(# 2056)

마스크 속성 #2535

patternTransform

텍스트 속성 text-anchor

textPath의 경우 +1

svg 아이콘 처리의 경우 <use> 에 +1입니다.

SVG 추가 기능의 경우 +1입니다. 현재 프로젝트에 <clipPath> 만 필요하지만 미래에 무엇이 필요할지 누가 알겠습니까? 포괄적인 추가 기능은 매우 도움이 될 것입니다.

추가 기능의 경우 +1입니다.

우리는 SVG를 React와 함께 광범위하게 사용할 계획이므로 우리와 같은 프로젝트를 위한 완전한 SVG 애드온은 좋은 생각인 것 같습니다.

일반적으로 textPath 및 보다 완전한 svg 지원에 대해 +1입니다.

SVG가 완전히 지원될 때까지 적절한 해결 방법은 필요한 요소를 명시적으로 렌더링하고 선언하기 위해 통과해야 하는 svg 속성을 React에 알려주는 것입니다. 예를 들어 <use> 는 다음과 같이 액세스할 수 있습니다.

var DOMProperty = require('react/lib/DOMProperty');

// xlink:href is not a standardly-supported svg attribute, but you can tell
// React that it is ok.
DOMProperty.injection.injectDOMPropertyConfig({
  isCustomAttribute: function (attributeName) {
    return (attributeName === 'xlink:href');
  }
});

var SvgButton = React.createClass({
  render: function render() {
    var use = React.createElement('use', {
      'xlink:href': '#' + this.props.icon
    });
    return (
      <button>
        <svg>
          { use }
        </svg>
        <div>{ this.props.label }</div>
      </button>
    );
 });

@jeffkole 이 작업을 수행할 때 주의하십시오. 속성이 변경되면 React는 여전히 setAttribute(setAttributeNS가 아님)를 호출하고 업데이트가 제대로 작동하지 않을 수 있습니다.

@spicyj React에서 네임스페이스 지원이 보이지 않습니다(즉, 코드베이스에서 setAttributeNS 에 대한 호출이 없음). 네임스페이스로 속성을 설정하는 적절한 방법에 대한 제안이 있습니까?

네임스페이스 속성이 어떻게 작동하는지 파악하지 못했고 현재 지원하지 않습니다. 죄송합니다.

vector-effect 이면 좋을 것입니다. 그 동안 사용할 수 있는 고정 너비 스트로크를 유지하는 다른 방법이 있습니까?

외래 개체에 대해 +1

텍스트 기준 속성에 대한 내 PR 참조: #2697

오 젠장 use 태그가 필요합니다 :실망:

나는

<svg dangerouslySetInnerHTML={{ __html: '<use xlink:href="#' + this.props.icon + '"/>' }} />

추악하지만 작동합니다.

:+1: 이것에 대해

애드온에서 완전한 svg 지원을 위해 +1

:+1:

@zpao @spicyj ReactDOM 및 SVGDOMPropertyConfig 원숭이 패치 없이 이러한 개별 SVG 요소를 React에 추가하는 지원 방법이 있습니까?

죄송합니다.

이미지 및 foreignObject에 대해 +1

외래 개체에 대해 +1

animate 가 작동하지 않으며 일부 속성이 있을 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

애드온에서 SVG를 지원하는 상태는 무엇입니까? 오늘 방금 이것에 부딪쳤습니다 :-(

cc @xymostech @MichelleTodd

네임스페이스 속성의 경우 +1.

애드온에서 완전한 svg 지원을 위해 +1

SVG 속성 지원을 위해 +1000 :-)

지원을 위해 +1속성

"fill-rule" 속성 추가 요청(아마도 "fillRule")

SVG 애드온도 보고 싶습니다 :+1:

React 핵심팀, 이에 대한 비하인드 스토리/토론이 있습니까?

특별히 이것에 대한 것은 아니지만 #3718, #3763은 모두 SVG 작업 중이며 #3067도 이 속성 변경과 관련이 있습니다.

완전한 SVG 지원을 위해 +1. 그런 일이 발생하기 전에 사용자 정의 태그와 속성을 만드는 방법이 필요합니다. 아무도 저를 도와 주시겠습니까?

마커 요소도 누락되었습니다(https://developer.mozilla.org/en/docs/Web/SVG/Element/marker).

@ersagunkuruca 그 동안 https://gist.github.com/akre54/80eaa63762ea499029f0 시도

3945 다음 태그는 마커용 React SVG에서 지원되지 않습니다: refx, refy,orient

:+1: 마커용!

SVG에 대한 모든 것 +1.

:+1

animateTransform 속성에 대한 지원은 어떻습니까?

<path
    d="M120 60c0-31.13-26.86-60-60-60">
    <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 60 60"
          to="360 60 60"
          dur="1.5s"
          repeatCount="indefinite" />
</path>

현재는 다음으로 끝납니다.

<path d="M120 60c0-31.13-26.86-60-60-60" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2">
    <animateTransform type="rotate" data-reactid=".0.0.0.1.6.0.0.$0.0.0.2.0"></animateTransform>
</path>

이미지의 경우 +1

+모든 SVG 지원

필터에 +1

사용 지원에 +1!

네임스페이스 속성의 경우 +1

use 및 filter 속성 지원에 대한 +1

<image> 지원에 +1. 클리핑 경로 안에 이미지가 있는 인라인 SVG를 렌더링하려면 React가 필요하며 <svg> 태그의 xmlns:xlink="http://www.w3.org/1999/xlink" 속성에 걸려 있습니다.

filter 대해 +1

@zpao 의 의견을 고려할 때 이 문제를 잠가야 합니까? 아니면 최소한 해당 정보로 OP를 업데이트할 수 있습니까? 나는 업데이트를 위해 스레드를 구독하고 있지만 @zpao 의 의견은 묻혔고(작업이 이미 완료되었다는 사실과 함께) 전체 스레드를 읽지 않은 사람에게는 다소 혼란스럽습니다.

@zpao 의 의견은 현재 반응에 내장되어 있지 않은 이유에 대한 결정을 설명하지만 애드온이 존재하지 않는 이유에 대한 더 나은 설명이 있습니까?
이것은 여전히 ​​탐구 할 수있는 것입니까?

마커의 경우 +1: refx, refy, orient

텍스트 속성의 경우 +1: 회전, 지배적 기준선

http://www.w3.org/TR/SVG/text.html#TextElementRotate속성

+1 애드온

+1 애드온

실제로 React는 core 'react'와 dom 'react-dom'으로 분리되는 과정 에 있는데, 드디어 'react-svg'가 들어갈 곳이 아닐까 싶습니다.

필터의 경우 +1입니다.

vector-effect 속성을 입력하세요.

SVG 태그/속성이 필요할 때 요청하는 사람들은 React에서 매우 열악한 모델이라고 생각합니다. 페이지에서 작동하는 SVG를 렌더링하기 위해 dangerouslySetInnerHTML 를 사용해야 한다는 것은 어리석은 일입니다. 즉, 다음은 누락된 항목 중 일부입니다.

_태그:_

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_속성:_

• filterUnits
• stdDeviation
• values
• in
• operator

그리고 아마도 두 범주 모두에서 훨씬 더 많을 것입니다. 그것들은 내가 작업하고 있는 특정 SVG 코드의 일부일 뿐입니다.

vector-effect 대해 +1

stdDeviation 대해 +1

별도의 완전한 React.SVG의 경우 +1입니다. 나는 지금까지 React에서 SVG로 작업하는 것을 좋아하지만 지원이 불완전하기 때문에 어떤 준복잡한 응용 프로그램에도 사용할 수 없습니다.

@spicyj 는 계속 업데이트해야 하는 별도의 구성을 제거할 계획을 가지고 있습니다. 곧 완료되기를 바랍니다. 그동안 꽉 잡아주세요.

animateTransform의 경우 +1

지배 기준선의 경우 +1(#3199.)

@zpao가 말했듯이 모든 속성을 사용할 수 있도록 이 문제를 곧 수정하겠습니다.

그때까지 이 문제를 잠급니다.

이것은 https://github.com/facebook/react/pull/5714 에서 수정되었습니다

5714는 #6243에서 되돌려졌으므로 여전히 속성 화이트리스트가 필요합니다. 그러나 좋은 소식은 #6243에 MDN에 대해 스크랩된 속성이 포함되어 있으므로 사용 사례의 95%를 다룰 것으로 예상된다는 것 입니다. 이 전체 문제와 연결된 문제 및 PR을 읽고 #6267에 두 개의 누락된 속성( focusable 및 vector-effect )을 수동으로 추가했습니다. 이러한 변경 사항이 v15에 적용될 것으로 예상합니다.

흥미롭게도 _tag_ 화이트리스트가 더 이상 관련성이 있는지 확실하지 않습니다. 지금까지 <marker> , <textPath> , <feGaussianBlur> 및 이 호와 연결된 PR에서 요청된 기타 태그를 마스터에 문제 없이 사용할 수 있었습니다. fbjs 여전히 SVG 태그 화이트리스트를 유지하고 있고 태그가 누락된 이유를 설명할 만큼 코드베이스를 잘 알지 못합니다. 그래서 @zpao 또는 @spicyj 가 이를 명확히 할 수 있기를 바랍니다. #6243을 보완하기 위해 누락된 태그도 추가해야 합니다.

속성 화이트리스트가 여전히 관련이 있기 때문에 이 문제를 풀고 있지만 사양에 있고 브라우저에 의해 구현되는 대부분의 속성이 지원되므로 이제 요청이 훨씬 줄어들기를 바랍니다. 최종 v15에서 여전히 지원되지 않는 것이 있으면 여기에서 알려주십시오.

이 참고 사항은 모든 SVG 속성을 통과하는 v15 RC1에는 적용되지 않습니다.

xlink:href 속성에 대해 상당히 많은 혼란이 있는 것으로 나타났습니다. 현재 지원 _is_ 하지만 다른 방식으로 작성해야 합니다.

<use xlinkHref="#shape" x="50" y="50" />

React는 0.14.x에서도 이를 xlink:href 로 올바르게 변환합니다. 예를 들어 이 바이올린 을 참조하십시오.

내 사용 사례의 경우 feFuncR , 특히 속성( slope , intercept 등)과 같은 일부 필터 요소를 인식하기 위해 React가 필요했습니다. 15.0-rc2에서는 괜찮은 것 같지만 0.14.x의 경우 react / react-dom 를 먼저 가져오기 전에 react/lib/SVGDOMPropertyConfig 내보낸 사전에 이러한 속성을 추가하여 문제를 해결했습니다. 그 자체. 예:

// Needed to set correct xmlns on <svg> and to preserve attributes on feFunc*.
// Required for 0.14.x. May become unnecessary with 15.x

var SVGDOMPropertyConfig = require("react/lib/SVGDOMPropertyConfig");

var DOMProperty = require("react/lib/DOMProperty");
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;

SVGDOMPropertyConfig.Properties.in = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.intercept = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.slope = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.xmlns = MUST_USE_ATTRIBUTE;

var React = require("react");
var render = require("react-dom").render;

이것은 분명히 해킹이지만 dangerouslySetInnerHTML

이것이 작동하는 동안 공식적으로 노출된 API가 아니며 부 또는 패치 릴리스에서 중단될 수 있습니다. 당신은 그것을 사용할 수 있지만 자신의 책임입니다. 여전히 누락된 것이 있으면 추가할 수 있도록 저희와 협력하십시오. 15 RC2에 문제가 없다는 소식을 들으니 기쁩니다.

네, 절대적으로. 나는 15가 RC 상태에서 나올 때까지만 그것을 사용하고 있습니다.

v15.0 의 (거의) 완전한 SVG 지원에 xmlns 및 xmlnsXlink 와 같은 일부 네임스페이스 속성은 렌더링할 때 적용할 수 없으며 표시할 때 괜찮습니다. 브라우저에서 svg .

.svg 이미지를 생성하려면 해당 속성이 필요합니다.

ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />)

따라서 위의 코드를 수행하면 작동하지 않습니다.

아마도 다음과 같은 사실과 관련이 있습니다.

... document.createElement 사용 덕분에 더 이상 SVG 태그 목록을 유지할 필요가 없으므로 이전에 지원되지 않았던 SVG 태그는 React 15에서 제대로 작동합니다.

document.createElementNS 아닙니다.

document.createElementNS가 아닙니다.

블로그 게시물은 너무 단순하지만 <svg> 태그 아래에 있을 때 createElementNS 가 사용됩니다. 이 문제가 발생하지 않으면 문제를 재현하는 JSFiddle과 함께 문제를 설명하는 별도의 문제를 제출할 수 있습니까? 감사 해요!

@gaearon 감사합니다. ReactDOM 통해 브라우저에서 svg 를 렌더링할 때 발생한다고 생각합니다. 아마도 이 문제는 ReactDOMServer 와 관련이 있을 것입니다.

다음은 렌더링된 SVG 와 xmlNS 및 xmlnsXlink 속성이 누락된 renderToStaticMarkup() 통해 생성된 코드를 표시 하는 펜 입니다.

이 경우 별도로 이 문제를 제기할 수 있습니다.

예, xmlns 및 xmlns:Xlink 이(가) 없습니다. https://github.com/facebook/react/pull/6471 에 추가 작업이 진행 중입니다.

지원되는 태그 목록에 여전히 <animate> 및 <animateTransform> 가 표시되지 않습니다. 지원하지 않기로 한 이유가 있습니까?

@실판

이제 모든 태그가 지원됩니다. 목록 은 React.DOM.* 팩토리 함수로 지원되는 태그만 알려줍니다.

다음 SVG 요소는 React.DOM.*에서 지원

(강조 내)

JSX를 사용하는 경우에는 이에 대해 전혀 걱정할 필요가 없습니다. JSX는 React.DOM.* 팩토리에 의존하지 않기 때문에 <animate> 및 <animateTransform> 하면 됩니다.

JSX를 사용하지 않더라도 잘 작동하는 React.createElement('animate', ...) 를 사용하거나 자체 팩토리 함수를 생성할 수 있습니다: var animate = React.createFactory('animate") .

xmlns 대한 지원 추가를 위해 +1 .... 그 동안 누군가가 해결 방법에 관심이 있다면(IE9-11을 지원할 수 있어야 했습니다) 이것이 제가 생각해낸 것입니다.

// explicitly build the SVG to be rendered here so we don't lose the NS
const stringifiedSvg = `<svg xmlns="http://www.w3.org/2000/svg" class="svgClass">
                               <use xlink:href="#linkToSymbolId"></use>
                        <svg/>`

return <div dangerouslySetInnerHTML={{__html: stringifiedSvg}}/>