将纹理应用于 SVG 并动态更改组件

Question

已经试图弄清楚这个问题一个多星期了，寻找以编程方式将纹理应用于 SVG 图像并更改其中的某些组件。就像改变衬衫上的领子类型并改变它的质地一样。尝试了带有阴影的PNG图像并更改了DIV元素背景，但它并没有给人一种好的感觉。阅读可以使用LWIP(轻量级图像处理(实现此目的的地方，但大多数示例是在旋转时最大程度地旋转图像或为其提供背景色。

<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

很高兴看到一些代码，但我的建议是使用插画器导出带有背景的 svg，复制标记给你的目标元素 Id 使用 Crome 检查看看是什么，使用 Jquery 按 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>