將SVG嵌入到ReactJS中

是否可以將SVG標記嵌入到ReactJS組件中？將SVG嵌入到ReactJS中

render: function() { 
    return (
    <span> 
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... 
    </span> 
); 
}

導致錯誤：

Namespace attributes are not supported. ReactJSX is not XML.

什麼是這樣做的最輕的方式。使用諸如React ART之類的東西對於我正在嘗試做的事情來說是過度殺傷力。

來源

2014-05-01 nicholas

你可以創建一個jsbin嗎？這可能就像將開啓的SVG標籤改爲' FakeRainBrigand

@FakeRainBrigand謝謝！在這種情況下就是這麼簡單。雖然，看看本的回答。很高興知道您可以在需要時解決jsx解析問題。 – nicholas

更新2016年5月27日

作爲陣營V15，對SVG支持在陣營是（接近？）100％的奇偶校驗與當前SVG瀏覽器支持（source）。您只需要應用一些語法轉換來使其兼容JSX，即like you already have to do for HTML（class→className,style="color: purple"→style={{color: 'purple'}}）。對於任何名稱空間（冒號分隔）屬性，例如xlink:href，刪除:並大寫屬性的第二部分，例如xlinkHref。下面是一個SVG與<defs>，<use>一個例子，內聯樣式：

function SvgWithXlink (props) { 
    return (
     <svg 
      width="100%" 
      height="100%" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlnsXlink="http://www.w3.org/1999/xlink" 
     > 
      <style> 
       { `.classA { fill:${props.fill} }` } 
      </style> 
      <defs> 
       <g id="Port"> 
        <circle style={{fill:'inherit'}} r="10"/> 
       </g> 
      </defs> 

      <text y="15">black</text> 
      <use x="70" y="10" xlinkHref="#Port" /> 
      <text y="35">{ props.fill }</text> 
      <use x="70" y="30" xlinkHref="#Port" className="classA"/> 
      <text y="55">blue</text> 
      <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/> 
     </svg> 
    ); 
}

Working codepen demo

有關特定支持的詳細信息，請查看文檔list of supported SVG attributes。這裏是（現在關閉的）GitHub issue，它跟蹤對命名空間SVG屬性的支持。

以前的答案

你可以做一個簡單的SVG嵌入，而無需通過只是剝離命名空間屬性使用dangerouslySetInnerHTML。例如，這個工程：

 render: function() { 
      return (
       <svg viewBox="0 0 120 120"> 
        <circle cx="60" cy="60" r="50"/> 
       </svg> 
      ); 
     }

此時你可以考慮增加道具像fill，或任何其他可能配置非常有用。

來源

2015-06-01 17:40:02

React支持的SVG屬性列表現在位於以下鏈接：https：//facebook.github.io/react/docs/dom-elements.html#all-supported-svg-attributes –

感謝galenlong，我更新了我的鏈接回答。 –

這是否可以在ReactNative中使用？ –

如果你只是要包括靜態SVG字符串，可以使用dangerouslySetInnerHTML：

render: function() { 
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />; 
}

並作出反應，將直接包括標記，而完全不處理它。

來源

2014-05-01 17:41:13

我使用React控制SVG內部的一些路徑，但React似乎不支持過濾元素。有沒有辦法支持這個？看起來像危險的SetInnerHTML不會工作，因爲我不能在SVG中放置一個跨度，我不能使用它來設置路徑上的過濾器屬性。我不假設有像往常一樣創建React元素的方法，但是讓它們逐字地將所有屬性傳遞給DOM元素？ – Andy

According to a react developer，你不需要命名空間xmlns。如果你需要的屬性xlink:href可以使用xlinkHref從反應0.14

例

Icon = (props) => { 
    return <svg className="icon"> 
    <use xlinkHref={ '#' + props.name }></use> 
    </svg>; 
}

來源

2015-11-08 10:46:59 lastid

這救了我的命。非常感謝！ – stackyname

如果你想從文件加載它，你可以嘗試使用React-inlinesvg - 這是非常簡單和直接的。

來源

2017-01-20 04:43:44 Youkko

將SVG嵌入到ReactJS中

回答

相關問題