陣營：聯SVG掩碼屬性

我有聯SVG圖標驗證碼：陣營：聯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/

來源

2016-07-16 Meldum

你使用什麼反應版本？ –

這似乎很好地工作：https://jsfiddle.net/07xre6dx/ 我假設你正在使用一些舊的反應版本，因爲use標記map屬性不支持，直到15.0 version：

從歷史上看，我們對SVG的支持不完整，許多標籤和屬性都丟失了。我們已經聽到了你，在React 15中，我們增加了對當今瀏覽器識別的所有SVG屬性的支持。如果我們錯過了您想使用的任何屬性，請告訴我們。作爲獎勵，由於利用使用document.createElement，我們不再需要維護SVG標籤的列表，所以這在以前是不支持任何SVG標籤應該只是罰款在陣營15

來源

2016-07-16 03:31:21

作爲一種解決辦法，現在你可以危險地使用SetInnerHTML

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

來源

2016-07-16 08:08:01

陣營：聯SVG掩碼屬性

回答

相關問題