SVG使用标签和ReactJS

Question

所以通常要包含大多数需要简单样式的SVG图标,我这样做:

<svg>
    <use xlink:href="/svg/svg-sprite#my-icon" />
</svg>

现在,我一直在玩ReactJS为晚评估它作为我的新的前端开发堆栈可能的成分,但是我注意到,在其支持的代码列表/属性,无论是use或xlink:href支持.

是否可以使用svg sprite并在ReactJS中以这种方式加载它们？

Answer 1

MDN说,xlink:href 已被弃用的青睐href.您应该能够href直接使用该属性.以下示例包括两个版本.

从React 0.14开始,xlink:href可以通过React作为属性xlinkHref.它被称为0.14 发行说明中的"值得注意的增强"之一.

<!-- REACT JSX: -->
<svg>
  <use xlinkHref='/svg/svg-sprite#my-icon' />
</svg>

<!-- RENDERS AS: -->
<svg>
  <use xlink:href="/svg/svg-sprite#my-icon"></use>
</svg>

更新2018-06-09:添加了有关hrefvs xlink:href属性和更新示例的信息以包含两者.谢谢 @devuxer

更新3:在撰写本文时,可以在此处找到React主SVG属性.

更新2:似乎现在所有 svg属性都可以通过react获得(请参阅merged svg属性PR).

更新1:您可能需要关注GitHub 上与svg相关的问题,以获得额外的SVG支持登陆.工程有进展.

演示:

const svgReactElement = (
  <svg
    viewBox="0 0 1340 667"
    width="100"
    height="100"
  >
    <image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
    { /* Deprecated xlink:href usage */ }
    <image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
  </svg>
);

var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement);
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml);

ReactDOM.render(svgReactElement, document.getElementById('render-result') );

function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>

<h2>Render result of rendering:</h2>
<pre>&lt;svg
  viewBox=&quot;0 0 1340 667&quot;
  width=&quot;100&quot;
  height=&quot;100&quot;
&gt;
  &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
  { /* Deprecated xlink:href usage */ }
  &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
&lt;/svg&gt;</pre>

<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2>
<pre id="render-result-html"></pre>
<h2><code>ReactDOM.render()</code> output:</h2>
<div id="render-result"></div>

Answer 2

更新2018年9月:不推荐使用此解决方案,请阅读Jon的答案.

-

反应并不支持所有的SVG标签就像你说的,有支持的标签的列表在这里.他们正在努力提供更广泛的支持,f .ex在这张票中.

一个常见的解决方法是为不支持的标签注入HTML,f.ex:

render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

Answer 3

正如 Jon Surrell 的回答中已经说过的那样，现在支持使用标签。如果你没有使用 JSX，你可以这样实现：

React.DOM.svg( { className: 'my-svg' },
    React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)

Answer 4

如果你遇到了xlink:href,那么你可以通过删除冒号并使用添加的文本来获取ReactJS中的等价物:xlinkHref.

您最终可能会在SVG中使用其他命名空间标记,例如xml:space,等等.同样的规则适用于它们(即xml:space变为xmlSpace).