使用`fill`属性在React中出现解析错误

huangapple go评论138阅读模式
英文:

Getting parsing error using fill css in react

问题

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g id="flat">
<path
d="M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,0-3.642-3.962,4.728,4.728,0,0,0-5.695,3.834l-.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z"
style={{fill:#746250}}
/>
</g>
</svg>

英文:
 &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 64 64&quot;&gt;
      &lt;g id=&quot;flat&quot;&gt;
        &lt;path
          d=&quot;M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,0-3.642-3.962,4.728,4.728,0,0,0-5.695,3.834l-.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z&quot;
          style={{fill:#746250}}
        /&gt;

It says Unexpected digit after hash token highlighting this: #

What is correct way of using fill css in react? I'm trying to import svg file. Other alternative ways also appreciated.

答案1

得分: 1

尝试直接在路径标签中填写fill而不是将其添加到样式中:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <g id="flat">
        <path
          d="M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,03.6423.962,4.728,4.728,0,0,0-5.695,3.834l.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z"
          fill="#746250"
        />
      </g>
</svg>

请注意,我只提供了代码部分的翻译,没有额外的内容。

英文:

try giving fill in path tag directly instead of adding it in style

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 64 64&quot;&gt;
      &lt;g id=&quot;flat&quot;&gt;
        &lt;path
          d=&quot;M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,03.6423.962,4.728,4.728,0,0,0-5.695,3.834l-.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z&quot;
          fill=&quot;#746250&quot;
        /&gt;

huangapple
  • 本文由 发表于 2023年3月7日 17:42:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/75660239.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定