2

我有一个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 怎么样？

4

2 回答 2

3

样式不适用于文档，并且您拥有的 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>标签也是如此。

于 2013-08-29T10:59:39.440 回答
0

我不认为如果您将 svg 设置为外部资源，您将能够使用 css 或 javascript 修改其内部属性这就像尝试使用 css 设置 iFrame 样式一样。

几种解决方案：

  1. 将 SVG 嵌入到 html 中
  2. 从 SVG 创建一个带有蓝色和红色圆圈的精灵，并且只移动背景位置
  3. 创建多个 SVG 并根据类分别调用它们。希望有帮助。
于 2013-08-29T11:10:12.287 回答