Question

我在查看拾取的元素并将颜色应用于拾取的元素时遇到问题。

例如我有一个名为untitled.svg的图像精灵，其中列出了图标集合。我想选择日历。我可以拾取元素，但是无法查看或设置拾取元素日历的样式。我可以看到正在渲染的路径，但是无法设置输出的样式。

日历代码示例

<symbol id="calendar" x="160" y="0" class="st1" width="100%" height="100%" stroke="blue" style="
">
    <title>calendar</title>

<path class="st0" d="M181.3,23.3h-10.8c-0.6,0-1.1-0.5-1.1-1.1V11.5c0-0.6,0.5-1.1,1.1-1.1h10.7c0.6,0,1.1,0.5,1.1,1.1v10.7  C182.3,22.9,181.9,23.3,181.3,23.3z M170.5,11.2c-0.2,0-0.4,0.1-0.4,0.4v10.7c0,0.2,0.1,0.4,0.4,0.4h10.7c0.2,0,0.4-0.1,0.4-0.4  V11.5c0-0.2-0.1-0.4-0.4-0.4C181.3,11.2,170.5,11.2,170.5,11.2z"/>
<path class="st0" d="M172.3,8.8h0.7v1.8h-0.7V8.8z"/>
<path class="st0" d="M178.8,8.8h0.7v1.8h-0.7V8.8z"/>
<path class="st0" d="M175.9,14.6c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4C177.3,13.9,176.7,14.6,175.9,14.6z   M175.9,12.4c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7S176.3,12.4,175.9,12.4z"/>
<path class="st0" d="M179.5,14.6c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4  C180.9,13.9,180.3,14.6,179.5,14.6z M179.5,12.4c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7  S179.9,12.4,179.5,12.4z"/>
<path class="st0" d="M172.3,18.1c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4  C173.8,17.5,173.1,18.1,172.3,18.1z M172.3,16c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7  S172.7,16,172.3,16z"/>
<path class="st0" d="M175.9,18.1c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4S176.7,18.1,175.9,18.1z M175.9,16  c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7S176.3,16,175.9,16z"/>
<path class="st0" d="M179.5,18.1c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4S180.3,18.1,179.5,18.1z   M179.5,16c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7S179.9,16,179.5,16z"/>
<path class="st0" d="M172.3,21.7c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4S173.1,21.7,172.3,21.7z M172.3,19.6  c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7S172.7,19.6,172.3,19.6z"/>
<path class="st0" d="M175.9,21.7c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4S176.7,21.7,175.9,21.7z M175.9,19.6  c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7S176.3,19.6,175.9,19.6z"/>

</symbol>

我想念的是什么。我是深度使用svgs的新手。

Answer 1

Symbol请勿使用标签。请改用svg标签这样，您可以在屏幕上看到您的绘图。

Answer 2

这对我有用。 svg文件和html文件位于同一文件夹中。我希望这会有所帮助。

我正在使用精灵的html文档：

请注意，我正在使用sof.svg#symb

<!DOCTYPE html>
<html lang="en">
<head>
  <style>svg{border:1px solid;overflow:visible;}</style>
</head>
<body>

  <svg viewBox="0 0 14 16" width="50">
    <use xlink:href="sof.svg#symb" fill="red"/>
  </svg>

</body>
</html>

svg文件sof.svg

请注意，symbol的ID为id="symb"

<svg xmlns="http://www.w3.org/2000/svg">  
<symbol viewBox="169 8 14 16" id="symb" style="overflow: visible">
<path class="st0" d="M181.3,23.3h-10.8c-0.6,0-1.1-0.5-1.1-1.1V11.5c0-0.6,0.5-1.1,1.1-1.1h10.7c0.6,0,1.1,0.5,1.1,1.1v10.7  C182.3,22.9,181.9,23.3,181.3,23.3z M170.5,11.2c-0.2,0-0.4,0.1-0.4,0.4v10.7c0,0.2,0.1,0.4,0.4,0.4h10.7c0.2,0,0.4-0.1,0.4-0.4  V11.5c0-0.2-0.1-0.4-0.4-0.4C181.3,11.2,170.5,11.2,170.5,11.2z"/>
<path class="st0" d="M172.3,8.8h0.7v1.8h-0.7V8.8z"/>
<path class="st0" d="M178.8,8.8h0.7v1.8h-0.7V8.8z"/>
</symbol>
</svg>

如何在svg子画面中填充或描画svg元素。

2 个答案: