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

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

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

1 个答案: