有人在做这方面的工作吗？ 我很想实现filter标签。

preserveAspectRatio似乎也不见了： http :

我应该为此创建 PR 还是您更喜欢先收集所有缺失的属性/标签，然后再创建一个补丁？

[编辑] 在提交https://github.com/facebook/react/commit/0f0328f0930d7fcf0b92cde40b1d6966cd747054中添加了preserveAspectRatio

你好。

如上所述，由于

添加相关的<marker> SVG 元素怎么样？
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

我刚刚意识到我也需要这个。 这是它的一个很好的概述： http :

这种“在 1 个人需要时随处添加随机元素和属性”的方法已经失控。 所以我们要么需要支持所有东西，要么什么都不支持（或者现在添加一组合理的东西，然后冻结在那里）。

我抓取了http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html的几乎所有内容（不包括命名空间属性）并想出了这个： https :

然而，这为我们的缩小构建增加了大约 2kb（尽管它会被闭包编译器压得很好），我现在不想增加这个大小。 我们已经讨论过做一个单独的 SVG 构建。 或者将其作为插件单独发送。

@zpao你说得对。 完整的 SVG 支持可能是一个插件。 为此，需要设置折旧警告以通知例如 React.DOM.circle 将变为 React.SVG.circle

+1 为 React.SVG.circle

@zpao
一个完整的 SVG 插件听起来是一个很好的方法。 许多项目不需要任何 SVG，因此我们不应该为它们加重代码。 其他项目需要并且只进行一半的支持是没有意义的。

+1

2069 请求支持图像。

+1 图像支持

+1 也用于图像支持

+1 表示<use>支持。 我们将它用于我们的 svg 图标集。 我们正在尝试dangerouslySetHTML使其工作，但是，事件冒泡不适用于它。

缺少strokeDashoffset 。 我想将它用于进度条，如下所示： http :

+1 为strokeDashoffset

还想用它做一个进度条。

使用<text>时我缺少alignment-baseline <text>

也许有人有意志力浏览http://www.w3.org/TR/SVG/Overview.html并获取所有属性和属性？ （可能有一个更好的 URL 用于此目的，不确定...）

另一个帮助是知道在源代码和测试中的何处更改它，以便更容易做出反应。

FWIW，大多数属性仍然可以使用 style 属性应用。

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

@syranide我做到了（主要是自动化的，因为手动操作会很疯狂） - https://github.com/zpao/react/compare/fuck-svg。 请参阅我之前关于为什么不只是合并的评论。

@ThomasDeutsch查看大多数以前与 SVG 相关的拉取请求。 也就是说，我宁愿制定一个计划而不是一个一个地添加它们（我也会将您引向我之前的评论）。

+1 for textPath - 我目前正在处理的项目需要它，现在我正在破解一个讨厌的解决方案。 我很乐意为 React SVG 插件包贡献一个实现

:+1: 一个完整的 SVG 插件。 估计什么时候发货？

+1 外国对象

+1 外国对象

属性xlink:href以便使用 svg 精灵。

+1 表示<use>支持

目前使用https://www.npmjs.org/package/react-inlinesvg作为解决此问题的方法。

属性： maskUnits & maskContentUnits (# 2056)

掩码属性 #2535

patternTransform

文本属性text-anchor

+1 为 textPath

+1 用于<use>用于 svg 图标处理。

+1 表示 SVG 插件。 我目前只需要<clipPath>用于一个项目，但谁知道我将来需要什么。 一个全面的附加组件将非常有帮助。

+1 表示附加组件。

我们计划在 React 中广泛使用 SVG，因此为我们这样的项目提供一个完整的 SVG 插件似乎是一个好主意。

+1 用于 textPath 和更完整的 svg 支持。

在完全支持 SVG 之前，一个不错的解决方法是告诉 React 它应该通过哪些 svg 属性来渲染和明确声明您需要的元素。 例如， <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：关于这个

+1 在插件中获得完整的 svg 支持

：+1：

@zpao @spicyj是否有一种支持的方式可以将这些单独的 SVG 元素添加到 React 中，而无需修补ReactDOM和SVGDOMPropertyConfig ？

抱歉，没有。

+1 用于图像和外来对象

+1 外国对象

animate不起作用，可能还有它的一些属性： https :

在插件中支持 SVG 的状态是什么？ 今天刚遇到这个:-(

抄送@xymostech @MichelleTodd

+1 用于命名空间属性。

+1 在插件中获得完整的 svg 支持

+1000 用于 SVG 属性支持 :-)

+1 表示支持属性

请求添加属性“fill-rule”，可能是“fillRule”

还想看到一个 SVG 插件：+1：

React 核心团队，是否有任何幕后动作/讨论？

不是专门针对这一点，但#3718、#3763 都是正在处理的 SVG 内容，#3067 也与此属性更改有关。

+1 以获得完整的 SVG 支持。 在它发生之前，我需要一种方法来创建自定义标签和属性。 任何人都可以帮助我吗？

标记元素也丢失（https://developer.mozilla.org/en/docs/Web/SVG/Element/marker）

@ersagunkuruca同时尝试https://gist.github.com/akre54/80eaa63762ea499029f0

3945 React SVG 中不支持这些标签作为标记：refx、refy、orient

:+1: 对于标记！

+1 SVG 所有的东西。

:+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 命名空间属性

+1 为use和filter属性支持

+1 表示<image>支持。 我需要 React 来渲染一个在剪切路径中有图像的内联 SVG，它挂在<svg>标签中的xmlns:xlink="http://www.w3.org/1999/xlink" attr 上。

+1 为filter

考虑到@zpao的评论，这个问题应该被锁定吗？ 或者至少，我们可以用这些信息更新 OP 吗？ 我订阅了该线程的更新，但@zpao的评论被隐藏了（以及工作已经完成的事实），对于没有阅读整个线程的人来说，这有点令人困惑。

@zpao的评论解释了为什么它目前没有内置到 react 中的决定，但是有没有更好的解释为什么插件不存在？
这是仍然可以探索的东西吗？

+1 标记：refx、refy、orient

+1 文本属性：旋转、主导基线

http://www.w3.org/TR/SVG/text.html#TextElementRotateAttribute

+1 插件

+1 插件

实际上 React 正处于分裂为核心 'react' 和 dom 'react-dom' 的过程中，我猜这就是 'react-svg' 最终会出现的地方

+1 为过滤器。

vector-effect属性请

我认为人们在碰巧需要它们时请求 SVG 标签/属性对于 React 来说是一个非常糟糕的模型。 我必须使用dangerouslySetInnerHTML来在页面上呈现工作的 SVG，这很愚蠢。 话虽如此，这里有一些缺失的东西：

_标签：_

• feMorphology
• feOffset
• feColorMatrix
• feMerge
• feMergeNode

_属性：_

• filterUnits
• stdDeviation
• values
• in
• operator

并且可能在这两个类别中更多。 这些只是我正在使用的特定 SVG 代码中的一些。

+1 为vector-effect

+1 为stdDeviation

+1 用于单独且完整的 React.SVG。 到目前为止，我喜欢在 React 中使用 SVG，但支持的不完整使得它不适用于任何半复杂的应用程序。

@spicyj计划消除我们需要不断更新的单独配置的需要。 希望这将很快完成。 同时，请抱紧。

+1 为 animateTransform

+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 中要求的其他标签，而不会在 master 上出现问题。 我看到fbjs仍然维护一个 SVG 标签白名单，我不太了解代码库，无法说明为什么今天缺少标签对我有用，所以希望@spicyj可以澄清这一点，以及是否我们还需要在那里添加缺失的标签，以补充 #6243。

我正在解决这个问题，因为属性白名单仍然相关，但希望我们现在看到的请求会少很多，因为大多数属性都在规范中并且由浏览器实现。 如果最终版 v15 中仍然不支持某些内容，请在此处告诉我们。

此注释不适用于通过所有 SVG 属性的 v15 RC1。

我注意到xlink:href属性似乎有很多混淆。 它 _is_ 当前支持，但您需要以不同的方式编写它：

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

即使在 0.14.x 中，React 也会正确地将其转换为xlink:href 。 有关示例，请参阅此小提琴。

对于我的用例，我需要 React 识别一些过滤器元素，例如feFuncR ，特别是它们的属性（ slope 、 intercept等）。 它在 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和通过renderToStaticMarkup()生成的代码，其中至少缺少xmlNS和xmlnsXlink attrs。

如果是这种情况，我可以单独提交此问题。

是的， xmlns和xmlns:Xlink丢失了。 https://github.com/facebook/react/pull/6471有一些正在进行的工作来添加它。

我仍然没有在支持的标签列表中看到<animate>和<animateTransform> 。 你有什么理由不支持它吗？

@shilpan

现在支持所有标签。 该列表仅说明支持哪些标签作为React.DOM.*工厂函数：

React.DOM.*支持以下 SVG 元素

（强调我的）

如果你使用 JSX，你根本不需要担心这个——写<animate>和<animateTransform>就可以了，因为 JSX 不依赖于React.DOM.*工厂。

即使你不使用 JSX，你也可以使用React.createElement('animate', ...) ，它会工作得很好，或者创建你自己的工厂函数： var animate = React.createFactory('animate") 。

+1 添加对xmlns .... 同时，如果有人对解决方法感兴趣（我需要能够支持 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}}/>