html - 从 CSS 调整 SVG 的大小和颜色

Question

我在我的页面中使用了一个 SVG 文件，我可以通过从 <object> 加载它来根据容器样式调整它的大小。标签。我需要根据 css 类更改填充颜色，但我无法执行此操作。我只能使用 JavaScript 更改颜色，但有时它不起作用。我多次加载该 SVG，~30/40 对象标签，数据指向我的 .svg 文件。所以我想知道最好的方法是:

• 多次加载同一个 SVG 文件
• 缩放图像以适应它的容器
• 根据 CSS 更改填充颜色

我的尝试是:

html:

<div class="item">
   <object class="svg_icon color_1" data="file.svg"></object>
   <object class="svg_icon color_2" data="file.svg"></object>
   <object class="svg_icon color_3" data="file.svg"></object>
</div>

CSS:

.item {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px;
}
.svg_icon{
    height: 40px;
}
.color_1{
    fill: red;
}
.color_2{
    fill: blue;
}
.color_3{
    fill: yellow;
}

我试过 .color1 > svg也是，但它不起作用

编辑
我使用内联 SVG 解决了这个问题: html:

<div class="item">
   <svg viewBox="same as svg file" class="svg_icon color_1" data="file.svg">
      <use xlink:href="file.svg#svg_id"></use>
   </svg>
   <svg viewBox="same as svg file" class="svg_icon color_2" data="file.svg">
      <use xlink:href="file.svg#svg_id"></use>
   </svg>
   <svg viewBox="same as svg file" class="svg_icon color_3" data="file.svg">
      <use xlink:href="file.svg#svg_id"></use>
   </svg>
</div>

CSS:

.item {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px;
}
.svg_icon{
    height: 40px;
}
.color_1{
    fill: red;
}
.color_2{
    fill: blue;
}
.color_3{
    fill: yellow;
}

Answer 1

多次加载同一个 SVG 文件不是问题，因为浏览器会在第一次加载后不再加载。它在浏览器缓存中。

使用 svg，您可以随心所欲地缩放。您在这里提问的目的是什么？

您可以像这样使用 css 类更改 svg 颜色:

#mySVG {
 fill: white;
}
#mySVG.black {
 fill: black;
}