在包含HTML的样式SVG与CSS

我有一个包含一个简单三角形的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本身在一个单独的文件中.

解决方法

很明显为什么这不适合你.填充CSS属性仅适用于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”？&gt ;.我会亲自选择这种方式.您将无法直接从HTML文档控制属性的值,但不需要更改SVG文件.>使用< object>将SVG文件附加到HTML文档中并使用脚本：oObjElem.contentDocument.getElementsByTagNameNS(‘http://www.w3.org/2000/svg’,’polygon’)[0] .style.fill =’blue’;.

在包含HTML的样式SVG与CSS

解决方法

猜你在找的HTML相关文章