如何使用set標籤重新定義SVG中的填充屬性？我以爲我知道，但

我正在從維基媒體公共標準空白地圖6 svg工作。我添加了一個語言列表，我試圖做到這一點，當我將鼠標懸停在某種語言上時，相應的國家會點亮，改變顏色或以某種方式表明它們已被選中。這是我正在使用的代碼。如何使用set標籤重新定義SVG中的填充屬性？我以爲我知道，但

<set 
attributeName="fill" 
from="#E0E0E0" 
to="#FF8888" 
begin="tEnglish.mouseover" 
end="tEnglish.mouseout" 
/>

其中tEnglish是表示'英語'的文本對象。沒有運氣。

無論使用or還是其他方法，我都無法讓svg更改已定義的屬性。這意味着如果我從其中一個s中刪除fill =「＃E0E0E0」屬性，我可以使其工作（如果默認值是黑色而不是灰色，這不符合我正在工作的網站的樣式），但如果已經包含fill =屬性，它將不會按照標籤的指示進行更改。我也嘗試刪除fill =「＃E0E0E0」並在樣式表中定義它 - 同樣的問題。

那麼，一旦聲明路徑的屬性是否完全不可能重新定義呢？只有當屬性還沒有在其他地方定義時才工作？我的想法甚至可能嗎？我感謝任何可以提供的幫助。

我也歡迎任何關於您可能具有的其他方法（jQuery，JavaScript）的建議;儘管我對他們中的任何人都沒有那麼有經驗，但我可以做一些研究，任何領導都會受到讚賞。

來源

2012-05-10 Clinton Jarboe

如果添加'attributeType =「CSS」'，行爲是否會改變？ – Phrogz

svg文件中id =「tEnglish」的元素還是在另一個文檔中？ –

你能看看我的答案嗎？是你在找什麼？如果沒有，請讓我知道。 – Roberto

它的工作原理，如果你把set標籤裏面的元素：

#myrect { 
    fill: #800000; 
} 

#myrect:hover { 
    fill: #008000; 
}

例如用CSS：http://fiddle.jshell.net/7dcnZ/2/

當然

<rect 
    width="248.57143" 
    height="225.71428" 
    x="137.14285" 
    y="395.21933" 
    id="myrect" 
    style="fill:#800000;"> 
    <set 
     attributeName="fill" 
     to="#008000" 
     begin="mouseover" 
     end="mouseout" 
     /> 
</rect>

您也可以使用簡單的CSS實現它，JavaScript也是一個選項：

$('#myrect').hover(function() { 
    $(this).css('fill', '#008000'); 
}, 
function() { 
    $(this).css('fill', '#800000'); 
});

JavaScript的示例：http://fiddle.jshell.net/7dcnZ/3/

來源

2014-03-28 15:57:28 Roberto

如何使用set標籤重新定義SVG中的填充屬性？我以爲我知道，但

回答

相關問題