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

Posted 2023-03-06

【中文标题】使用从内容加载的 SVG 样式表

【英文标题】：Using style sheet for SVG loaded from content

【发布时间】：2013-09-01 16:49:07

【问题描述】：

我有一个circle.svg 文件

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
   >
  <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 怎么样？

【问题讨论】：

Can I change the fill color of an svg path with CSS?的可能重复

【参考方案1】：

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

几个解决方案：

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

【参考方案2】：

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

【讨论】：

是的，我终于用 JavaScript 和模板系统做到了。