SVGにテクスチャを適用してコンポーネントを動的に変更する

Question

これを1週間以上にわたって把握しようとしています SVGイメージにテクスチャをプログラム的に適用したり、その一部のコンポーネントを変更したりします。シャツとそれを変更するテクスチャです。 影でDNG要素の背景を変更したPNG画像を試しましたが、良い感じはしません。 LWIP（Light Weight Image Processing）を使用してこれを実現できるところを読んでください。しかし、ほとんどの例では回転中にImageの最大値を回転したり、背景色を付けたりしていました。

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

私が達成したいいくつかのサンプル。

https://josephchanan.com/customize/#

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

Answer 1

クロームは何か見て点検し、あなたのターゲット要素にIDが使用を与えるいくつかのコードを見ていいだろうが、私の提案はイラストレーターを使用してバックグラウンドでSVGをエクスポートするだろう、マークアップをコピーします、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>