如何通過JavaScript更改SVG內的圖案圖像參數？

我必須改變嵌入SVG，在模式定義並應用到矩形/路徑容器標識圖像鏈接內的標誌。有沒有辦法來改變鏈接到的圖像（的XLink：HREF =「link_to_logo.svg」）由JS？如何通過JavaScript更改SVG內的圖案圖像參數？

<pattern id="logo" 
    patternUnits="objectBoundingBox" 
    x="0" y="0" width="1" height="1"> 
    <image x="0" y="0" 
     xlink:href="link_to_logo.svg" 
     width="331" height="331"> 
    </image> 
</pattern> 

<path id="logo-container" d="M1152 99h331v331h-331z" fill="url(#logo)"/>

來源

2016-11-27 Sergey Prostov

$('#logo img').attr('xlink:href', 'newValue')

應該這樣做。

來源

2016-11-27 18:39:57

謝謝你的回答，現在將嘗試... –

你能解釋一下'img'，而不是'image'的使用情況如何？當選中時，瀏覽器將DOM從圖像更改爲img，但我沒有發現任何可信的來源。 – Dekel

@Dekel遺憾，是一個錯字 –

image.setAttributeNS("http://www.w3.org/1999/xlink","href",newValue)

in plain js use setAttributeNS。

來源

2016-11-27 18:49:45

謝謝Holger，也會嘗試你的方法 –

如何通過JavaScript更改SVG內的圖案圖像參數？

回答

相關問題