React：内联svg掩码属性

发布时间：2020-12-15 09:35:21 所属栏目：百科来源：网络整理

导读：我有这个内联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-.3

我有这个内联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/

解决方法

它似乎工作正常： https://jsfiddle.net/07xre6dx/
我假设您正在使用一些旧的反应版本,因为直到15.0 version才支持使用带有map属性的标记：

Historically our support for SVG has been incomplete,and many tags and attributes were missing. We heard you,and in React 15 we added support for all the SVG attributes that are recognized by today’s browsers. If we missed any of the attributes you’d like to use,please let us know. As a bonus,thanks to using document.createElement,we no longer need to maintain a list of SVG tags,so any SVG tags that were previously unsupported should work just fine in React 15.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!