Question

我希望有人可以指出我的错误在哪里我有这个小问题。我无法使用CSS从外部svg调整一个<symbol>，但我可以从同一个外部svg调整另一个<symbol>。

在CSS中，我正在更改width和height。哪个#pluss处理正常，而#heart完全忽略它。无论CSS大小调整，它只想保持24px * 24px。

我不知道我在做什么不同。令人头疼的混乱！

外部icons-defs.svg文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="pluss" viewBox="0 0 24 24" aria-labeledby="title">
    <title>Add</title>
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
  </symbol>
  <symbol id="heart" viewbox="0 0 24 24" aria-labeledby="title">
    <title>Favourite</title>
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
  </symbol>
</svg>

在HTML中：

<button>
  <svg class="icon-heart" role="presentation">
    <use xlink:href="icons-defs.svg#heart"></use>
  </svg>
  Like
</button>
<button>
  <svg class="icon-pluss" role="presentation">
    <use xlink:href="icons-defs.svg#pluss"></use>
  </svg>
  Add Goal
</button>

当在HTML文档顶部使用符号内联的相同svg时，它可以正常工作。

任何指针都会非常感激:)

Answer 1

@ robert-longson在评论中写了解决方案，所以我在这里复制粘贴。

一个符号有一个viewBox，一个没有。 SVG区分大小写，因此视图框不是功能属性。 HTML不区分大小写，因此在HTML解析器解析时它可以内联工作。

所以将viewbox更改为viewBox（大写字母B）修复了我的错误。

无法使用CSS更改外部svg中`symbol`元素的大小，但同一文件中的其他`符号`有效

1 个答案: