が反応：インラインSVGマスクプロパティ

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()} />