在包含的 HTML 中使用 CSS 设置 SVG 样式

Posted

技术标签:

【中文标题】在包含的 HTML 中使用 CSS 设置 SVG 样式【英文标题】:Styling SVG with CSS in the containing HTML 【发布时间】:2011-11-08 23:56:35 【问题描述】:

我有一个 SVG 文件,其中包含一个名为的简单三角形。该文件名为indicator.svg:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--Scalable Vector Graphic-->
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"     
     baseProfile="full">
     <polygon points="0,7 7,0 14,7"/>
</svg>

我有一个带有内置 CSS 的 html,它尝试设置 SVG 多边形的颜色:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.indicator
    fill:blue;

</style>
<title>Untitled Document</title>
</head>

<body>
<img class="indicator" src="images/indicator.svg" />
</body>
</html>

但它不会将 SVG 中三角形的颜色更改为蓝色。如何解决这个问题?我希望能够从 HTML 中选择三角形的颜色,而 SVG 本身位于单独的文件中。

【问题讨论】:

现在,您可以通过&lt;symbol&gt;&lt;use&gt; 包含和设置外部文件的样式。见this answer。 【参考方案1】:

很明显为什么这对你不起作用。 fill CSS 属性仅适用于 SVG 元素,但您试图将其应用于 HTML &lt;img&gt; 元素。可以通过其他方式达到预期的结果:

在主文档中使用true XHTML(application/xml*/*+xml MIME 类型);然后,您将能够混合命名空间并将 SVG 附加到其中。浏览器对该解决方案的支持非常好;它适用于所有支持 XHTML 和 SVG 的浏览器。 一些较新的浏览器(IE9+、Firefox 4+、Chrome)甚至允许您在 HTML 文档中执行相同的操作。 将样式表链接到 SVG 文档:&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;。我个人会选择这种方式。您将无法直接从 HTML 文档控制属性的值,但您不需要更改 SVG 文件。 使用 &lt;object&gt; 将 SVG 文件附加到 HTML 文档中并使用脚本:oObjElem.contentDocument.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'polygon')[0].style.fill = 'blue';

【讨论】:

以上是关于在包含的 HTML 中使用 CSS 设置 SVG 样式的主要内容,如果未能解决你的问题,请参考以下文章

我需要能够为 SVG 元素设置 CSS 类

o'Reill的SVG精髓(第二版)学习笔记——第二章

如何使用外部 CSS 设置 SVG 样式?

设置内联 SVG 的填充颜色 [重复]

如何在 CSS 中为 SVG 元素添加边框/轮廓/描边?

使用 CSS 设置 svg <image> 元素的 xlink:href 属性