是否有可能動態地修改一個用Javascript加載的SVG資源？

我有這些圖標，我想在程序上添加陰影（基本上，的東西，什麼都）對他們懸停，使他們看上去不那麼做作。是否有可能動態地修改一個用Javascript加載的SVG資源？

他們是SVG的所以理論上我可以在前面加上這樣的事情：

<filter id="f1" x="0" y="0" width="200%" height="200%"> 
    <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> 
    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> 
    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
</filter>

和一些JavaScript魔術在它適用於鼠標。這可能會節省設計工作的時間。

問題是，在SVG的表示爲<a style='background-image:url(icon.svg)' />。

有沒有辦法進入SVG元素？

來源

2012-09-17 Steven Lu

如果你使用SVG作爲圖像SVG的代碼，那麼你不能去圖像的DOM，並通過JavaScript操縱它。

雖然您可以使用XMLHTTPRequest加載它們，然後使用DOMParser對象將它們作爲內嵌數據插入到主文檔中，但這會暴露瀏覽器試圖通過鎖定圖像訪問來保護您的安全問題，即圖像可能會改變，你可能會加載任意的JavaScript到你的頁面。

什麼似乎最簡單，最安全的，在我看來，如果你只是改變圖像文件，直接使用編輯器，並添加過濾器放進去，然後用修改後的圖像。

來源

2012-09-17 21:32:00

如果你使用jquery addclass，只是鏈接到有更改另一個SVG？

你也可以創建一個帶有html代碼的svg元素（右鍵點擊文件 - >用記事本查看），你將有代碼 - 有在線轉換器可以進行所有必要的調整，然後你可以輸入用JavaScript

來源

2012-09-17 20:32:54 JJschk

所以......我可以從服務器加載了SVG一些代碼，用JS構建它，然後將其插入到我的DOM？在這一點上，我應該能夠使用我的JS進行修改。 –

理論上是。它有點類似於Raphael正在做的事情，只不過這個lib也是根據你輸入的數據生成你的svg，然後將它輸入到dom中。你只需要有一個工作svg elem，插入到Dom，然後調整它。 http://www.w3schools.com/svg/default.asp – JJschk

http://www.professorcloud.com/svg-to-canvas/ 我用這個轉換器和像一個魅力工作：D – JJschk

我不知道如何做到這一點你作爲一個背景圖像...但如果你可以加載一個div內的svg文件在this例如你可以使用我的進口（基於github的其他進口商的修改版），它在這裏：http://www.dariomac.com/Document/Raphael-Utils。您也可以看到這個storify，我描述了我直接從文件導入SVG所遵循的所有步驟。

來源

2012-09-18 00:27:19 dariomac

不，這不是直接可能的。一個解決方法，如果你需要這個將在html中使用內聯svg，或者通過< object>，< iframe>或<嵌入>引用svg文件。

使用內聯SVG和懸停here的濾波器效果的一個例子。 SVG的部分看起來像這樣主要爲：

<svg width="400" height="400" viewBox="-2 -2 36 32"> 
    <defs> 
    <style> 
     #stack polygon:hover { filter: url(#glow); } 
    </style> 
    <filter id="glow"> 
     <feMorphology radius="0.7"/> 
     <feGaussianBlur stdDeviation="1"/> 
     <feColorMatrix type="matrix" 
     values="0 0 0 0 0 
       0 0 0 0.9 0 
       0 0 0 0.9 0 
       0 0 0 1 0"/> 
    </filter> 
    </defs> 
    <g id="stack" class="icon" fill="#850508"> 
    <polygon points="0,20 16,24 32,20 32,24 16,28 0,24"/> 
    <polygon points="0,12 16,16 32,12 32,16 16,20 0,16"/> 
    <polygon points="0,4 16,0 32,4 32,8 16,12 0,8"/> 
    </g> 
</svg>

來源

2012-09-24 08:06:25

是否有可能動態地修改一個用Javascript加載的SVG資源？

回答

相關問題