Question

我有内联svg图标的代码：

@Icon = React.createClass
  render: ->
    <svg width="22" height="22" viewBox="0 0 22 22">
      <defs>
        <path d="M16.865 6.887c.136.449 2.028.624 2.086 1.209a8.862 8.862 0 0 1-.002 1.754c-.059.585-1.951.741-2.089 1.19-.138.45-.318.882-.542 1.296-.223.415 1 1.861.625 2.315a8.954 8.954 0 0 1-1.251 1.242c-.457.373-1.916-.839-2.333-.617a7.272 7.272 0 0 1-1.305.538c-.453.137-.607 2.014-1.196 2.072a9.062 9.062 0 0 1-1.766.002c-.589-.057-.767-1.934-1.22-2.07a7.221 7.221 0 0 1-1.304-.535c-.417-.221-1.85.994-2.307.621a8.911 8.911 0 0 1-1.248-1.239c-.374-.453.824-1.902.601-2.316a7.077 7.077 0 0 1-.538-1.295c-.137-.449-2.002-.602-2.06-1.186a8.939 8.939 0 0 1 .002-1.754c.059-.585 1.924-.763 2.062-1.213.137-.449.318-.881.541-1.296.224-.414-.972-1.838-.596-2.293a9.057 9.057 0 0 1 1.25-1.242c.458-.373 1.889.817 2.306.595a7.346 7.346 0 0 1 1.305-.538C8.339 1.991 8.521.136 9.11.078a9.061 9.061 0 0 1 1.766-.002c.588.057.739 1.911 1.192 2.047.452.136.887.315 1.304.536.416.221 1.877-.972 2.334-.6.457.372.873.785 1.248 1.239.375.454-.851 1.88-.629 2.294.223.414.403.846.54 1.295zm-6.852-2.376A4.498 4.498 0 0 0 5.514 9a4.486 4.486 0 0 0 4.494 4.484 4.498 4.498 0 0 0 4.499-4.489 4.486 4.486 0 0 0-4.494-4.484z" id="a"/>
        <mask id="b" x="-2" y="-2" width="22.02" height="21.896">
          <path fill="#fff" d="M-1.026-1.966h22.02V19.93h-22.02z"/>
          <use xlinkHref="#a"/>
        </mask>
      </defs>
      <use mask="url(#b)" xlinkHref="#a" transform="translate(1 2)" strokeWidth="4" stroke="#0070D9" fill="none" fillRule="evenodd"/>
    </svg>

但反应跳过此属性：mask="url(#b)"

演示：https://jsfiddle.net/88kLutmb/

Answer 1

似乎工作正常：https://jsfiddle.net/07xre6dx/ 我假设您使用的是旧的反应版本，因为use标记map属性不支持，直到15.0 version：

从历史上看，我们对SVG的支持不完整，并且缺少许多标签和属性。我们听说过，在React 15中，我们添加了对当今浏览器识别的所有SVG属性的支持。如果我们错过了您想要使用的任何属性，请告诉我们。作为奖励，由于使用了document.createElement，我们不再需要维护SVG标记列表，因此以前不受支持的任何SVG标记在React 15中都可以正常工作。

Answer 2

作为现在的解决方法，您可以使用dangerouslySetInnerHTML

function createMarkup() { return {__html: 'svg code here '}; };
<div dangerouslySetInnerHTML={createMarkup()} />

React：内联svg掩码属性

2 个答案: