css改变svg颜色_如何使用CSS混合模式和SVG动态更改产品图像的颜色

css改变svg颜色

To better explain that title right off the bat, here’s what we’re about to learn, and it’s easier than you think. Give it a go, change the shirt from yellow to blue by using the color picker in the bottom right corner:

为了立即更好地解释该标题，这是我们将要学习的内容，它比您想象的要容易。 放手一搏，使用右下角的颜色选择器将衬衫从黄色更改为蓝色：

See the Pen Dynamic Colour Picking – Part 4 by Kyle Wetton (@kylewetton) on CodePen.

见笔动态彩色采摘- 4部分由凯尔Wetton( @kylewetton )上CodePen 。

You can see another example of this in the demo Color this sofa! where you can change the color of a sofa and its background gradient.

您可以在演示中看到另一个示例将此沙发着色！ 您可以在其中更改沙发的颜色及其背景渐变。

Imagine this for a second: You’ve finally done it, over the summer, you and a buddy are about to launch your screen printing start up out of your shared house, it’s not much, but you have a working setup and a few local bands and non-profits have already shown interest. Your supplier for t-shirts, pants, hats and $2 sunglasses is exactly what you’ve been looking for, they supply 25 colors per item and you couldn’t be happier that your website has finally been signed off. Now all you need to do is upload some photos of your merchandise! Problem is, 25 colors per item? Thats 125 different options, how do you approach this?

想象一下：您终于完成了这个工作，在整个夏天，您和一个伙伴将要在您共享的房子外启动丝网印刷，这虽然不多，但是您有一个可以工作的设置以及一些本地设置。乐队和非营利组织已经表现出兴趣。 您的T恤，裤子，帽子和2美元太阳镜的供应商正是您所需要的，他们为每种商品提供25种颜色，对于您的网站最终被批准，您感到无比高兴。 现在，您需要做的就是上传一些商品照片！ 问题是每件25种颜色？ 多数民众赞成在125个不同的选择，您如何处理呢？

You’ve seen this often happen online, and the solution is almost always a picture of one color, and little dots that represent the rest of the options.

您已经看到这种情况经常在线发生，而解决方案几乎总是一张单色的图片，并用小点代表其余的选项。

And for good reason too, nobody wants to spend the time or money photographing someone wearing over 125 items, so like the masses before you, you get your friend to model one color of each and let your potential customer use their imagination to determine what the others look like based on a dotted color.

同样也有充分的理由，没有人愿意花费时间或金钱拍摄穿着125件以上商品的人，因此像您之前的群众一样，您可以让您的朋友为每种商品建模一种颜色，并让潜在客户利用他们的想象力来确定其他看起来像是基于虚线的颜色。

The reason for the preamble is to be clear about why the solution you’re about to learn is so valuable. With just a small to moderate amount of setup, you can take one photo of your product and let your web page dynamically change the color of a t-shirt, hat, sunglasses and pants to any color you throw at it, in fact, if you wanted to you can change all of these items independently on the same image, on the same web page, without it reloading.

前言的原因是要弄清楚为什么您要学习的解决方案如此有价值。 只需进行少量到中等的设置，您就可以拍摄产品的一张照片，并让您的网页将T恤，帽子，太阳镜和裤子的颜色动态地更改为您扔给它的任何颜色，实际上，如果您希望可以在同一图像，同一网页上独立地更改所有这些项目，而无需重新加载。

那么这是怎么回事？ 这是什么魔术？ (So what’s happening here? What magic is this?)

It’s an SVG element with an image behind it, and a vector shape (path element) drawn over the part(s) you want the color to change. You simply change the fill color of your path element, and use the CSS property mix-blend-mode: multiply to stain that color onto the image.

这是一个SVG元素，后面带有图像，并且在要更改颜色的零件上绘制了矢量形状( path元素)。 您只需更改path元素的填充颜色，然后使用CSS属性mix-blend-mode：乘法即可将该颜色着色到图像上。

让我们开始吧 (Let’s Get Started)

Download this photo if you’d like to follow along.

如果