在包含HTML的CSS中使用CSS設置SVG樣式

Question

我有一個包含一個名為的簡單三角形的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本身在一個單獨的文件中。

Answer 1

很明顯為什么這對你不起作用。 fill CSS屬性僅適用於SVG元素，但您嘗試將其應用於HTML <img>元素。 可以通過其他方式達到預期的結果：

在主文檔中使用true 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'; 。

在包含HTML的CSS中使用CSS設置SVG樣式

問題描述

1 個解決方案

解決方案1
31 已采納 2011-09-02 08:54:40

在包含HTML的CSS中使用CSS設置SVG樣式

問題描述

1 個解決方案

解決方案1 31 已采納 2011-09-02 08:54:40

解決方案1
31 已采納 2011-09-02 08:54:40