在包含HTML中使用CSS样式化SVG

Question

在包含HTML中使用CSS样式化SVG

16

我有一个包含一个简单三角形的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本身位于另一个文件中。

- AlexStack

现在你可以通过<symbol>和<use>元素来引用并样式化外部文件。请参考此答案。 - totymedli

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- duri · Accepted Answer

很明显，这种方法对你不起作用。CSS属性fill只适用于SVG元素，但你正在尝试将其应用于HTML的<img>元素。可以通过以下其他方式实现所需的结果：

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