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

Question

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

我有一个包含一个名为的简单三角形的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>

Run Code Online (Sandbox Code Playgroud)

我有一个内置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>

Run Code Online (Sandbox Code Playgroud)

但它不会将SVG中三角形的颜色更改为蓝色.怎么解决这个问题？我希望能够从HTML内部选择三角形的颜色,而SVG本身在一个单独的文件中.

Answer 1

dur*_*uri 31

很明显为什么这对你不起作用.该fillCSS属性仅适用于SVG元素,但你试图把它应用到HTML <img>元素.可以通过其他方式达到预期的结果:

在主文档中使用true XHTML(带application/xml或*/*+xmlMIME类型); 然后,您将能够混合名称空间并将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';.

归档时间：	14 年，1 月前
查看次数：	17521 次
最近记录：	11 年，9 月前