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

【问题标题】：Applying texture to SVG and change components dynamically将纹理应用于 SVG 并动态更改组件
【发布时间】：2017-10-30 01:36:58
【问题描述】：

一个多星期以来一直在尝试解决这个问题，希望以编程方式将纹理应用于 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#

【问题讨论】：

标签： javascript node.js svg

【解决方案1】：

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

【讨论】：