[英]Using JavaScript in a background-image svg
我有一個SVG(十字架),它根據使用JavaScript提供給SVG網址的哈希值來改變線條的顏色。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1" />
<line x1="100%" y1="0" x2="0" y2="100%" stroke="black" stroke-width="1" />
<script>
if (window.location.hash) {
document.getElementsByTagName('line')[0].setAttribute('stroke', location.hash);
document.getElementsByTagName('line')[1].setAttribute('stroke', location.hash);
}
</script>
</svg>
這作為<object>
元素( <object type="image/svg+xml" data="img/svg/cross.svg#ff0000"></object>
)完全正常,但作為img
或css background-image
失敗background-image
。
如何將此工作作為CSS background-image
?
出於安全原因 ,SVG中用作HTML映像的動態行為被禁用 。 原因很明顯 - 您可以使用來自不同域的SVG圖像,並且不希望它在文檔的上下文中運行JavaScript代碼。 因此,用作HTML圖像的SVG基本上都是靜態的。 有關http://www.schepers.cc/svg/blendups/embedding.html的更多詳細信息(感謝@ RobertLongson提供此鏈接)。
Firefox中有一個解決方法:如果你有內聯 SVG代碼(可以隱藏),你可以使用過濾filter
CSS屬性從該SVG代碼中使用filter
。 根據您要實現的目標,這可能是一個相當強大的工具 。 根據MDN Chrome和Safari也應該支持這一點,但我不確定他們會這樣做。
我找到了一個適合我的解決方案。 我也在使用Sass,有了它我找到了一個base64編碼插件。 有了它,我可以在我的CSS中編寫svg,然后將其編碼為base64。 我也可以使用變量。 SASS代碼現在看起來像這樣:
background: url('data:image/svg+xml;base64,'
+ base64Encode('<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#{$color-line}" stroke-width="1" /><line x1="100%" y1="0" x2="0" y2="100%" stroke="#{$color-line}" stroke-width="1" /></svg>'));
base64插件位於: Compass / SASS中的URL-或Base64-編碼字符串
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.