Question

我有circle.svg个文件

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="48" height="48">
  <circle class="circle" cx="24" cy="24" r="24"></circle>
</svg>

和HTML文件

...
<div class="bullet blue">
  ...
</div>
<div class="bullet red">
  ...
</div>
<style>
.bullet:before {
  content: url(circle.svg);
}
.bullet.blue:before {
  .circle {
    fill: #0000FF;
  }
}
.bullet.red:before {
  .circle {
    fill: #FF0000;
  }
}
</style>

我希望圆圈由样式表填充，但它不起作用。但是，如果我将svg代码嵌入到HTML中，样式表将对其生效，但我不想在HTML代码中插入额外的资源。有没有办法通过CSS做到这一点？如果没有，使用JavaScript怎么样？

Answer 1

样式不适用于各种文档，而您拥有的SVG和HTML是单独的文档。

如果您通过两个<object>或<iframe>标记嵌入了圈子，则可以执行您想要的操作，因为您可以访问和操作SVG DOM，即

。

var svgDoc = document.getElementById("objectId1").contentDocument;
var style = svgDoc.createElementNS("http://www.w3.org/2000/svg". "style");
style.textContent = ".circle { fill: #0000FF; }";
svgDoc.rootElement.appendChild(style);

同样适用于其他<object>标记。

Answer 2

我不认为如果你将svg设置为外部资源，你可以用css或javascript修改它的内部属性这就像尝试用css设计iFrame样式。

几种解决方案：

将您的SVG嵌入html
使用蓝色和红色圆圈从SVG创建一个精灵，只移动背景位置
创建多个SVG并根据类别单独调用它们。希望有所帮助。

使用从内容加载的SVG样式表

2 个答案: