將紋理應用到SVG並動態更改組件

已經試圖計算這個問題超過一個星期了，尋找以編程方式將紋理應用到SVG圖像並更改它的某些組件。一件襯衫，並改變它的質感。嘗試了帶有陰影的PNG圖像並更改了DIV元素背景，但沒有給出好的感覺。某處閱讀，可以實現這一點使用LWIP（重量輕的圖像處理），但大多數的例子是旋轉圖像的最大或給一個背景色爲它在旋轉的同時。將紋理應用到SVG並動態更改組件

<div class="color" style=" background-image: url('gr6.JPG');"> 
<img src="spe.png"> 
</div>

我希望實現的一些樣本。

https://josephchanan.com/customize/#

https://www.bombayshirts.com/custom/shirt#

來源

2017-05-29 Yashesh

會很高興地看到一些代碼，但我的建議是出口SVG用插畫背景，複製標記給你的目標元素標識的使用克羅姆檢查，看看什麼是什麼，通過ID訪問任何svg元素與Jquery，你可以做到這一點，只要SVG代碼是內聯的，而不是像'<img scr="my.svg"/>'這樣的圖像 - 不會工作。那麼你就可以播放和動畫的SVG但是你喜歡

<svg> 
<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> 
    <image xlink:href="myTexture.jpg" x="0" y="0" width="100" height="100" /> 
    </pattern> 
    <pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100"> 
    <image xlink:href="myTexture2.jpg" x="0" y="0" width="100" height="100" /> 
    </pattern> 
</defs> 
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url(#img1)" /> 
</svg> 
<script> 
$('svg circle').attr('fill','url(#img2)'); // just changed texture programmaticly 

</script>

來源

2017-05-29 17:39:20

將紋理應用到SVG並動態更改組件

回答

相關問題