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 by Kyle Wetton () on .
见笔由凯尔Wetton( )上 。
You can see another example of this in the demo 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 if you’d like to follow along.
如果您想继续，请下载。
Photo by  on
在上照⽚
This part is important: you want to know the dimensions of your photo, and it should ideally be something customized to your website’s needs (a square photo at 1000x1000px for instance). My example is 1920x1280px and it’s a dimension we should take note of when we set this up.
这部分很重要：您想知道照⽚的尺⼨，并且理想情况下，它应该是根据您的⽹站需求定制的东西(例如，⽅形照⽚，尺⼨为1000x1000px )。 我的⽰例是1920x1280px ，这是设置尺⼨时应注意的尺⼨。
Second, the part of the photo you’re changing needs to be white. Our t-shirt is white, if we were changing a sofa material or the cladding on the side of house, the material and cladding needs to be white.
其次，您要更改的照⽚部分必须为⽩⾊。 我们的T恤是⽩⾊的，如果我们要更换沙发材料或房屋侧⾯的覆层，则材质和覆层需要为⽩⾊。
第1部分：创建⽮量形状/ SVG标记 (Part 1: Creating the Vector Shape / SVG Markup)
The easiest way to do this is via Adobe Illustrator, and it’s the program we will be using here, but if you don’t have that, you can follow along using the free online alternative .
最简单的⽅法是通过Adobe Illustrator，这是我们将在此处使⽤的程序，但是如果您没有该程序，则可
以使⽤免费的在线替代。
Create a canvas at the same dimensions as your photo (1920 x 1280px) and place your photo directly centred in the frame.
创建与照⽚尺⼨相同的画布(1920 x 1280像素)，然后将照⽚直接放在框架的中⼼。
Tip: Lock this photo so that it doesn’t budge.
提⽰：锁定此照⽚，以使其不会出现偏差。
The image has the Lock enabled in the layer panel to the right.
该图像在右侧的图层⾯板中启⽤了“锁定”。
Using the Pen Tool, draw a path around the t-shirt, be sure to zoom in as much as possible and really focus on getting this path as close to pixel perfect as possible. It sounds daunting, but doing this by hand will result in the most accurate final outcome and the Pen Tool is something that while takes a bit of practice, gets faster the more you use it.
使⽤钢笔⼯具，在T恤周围绘制⼀条路径，确保尽可能放⼤，并真正专注于使该路径尽可能接近像素完美。 这听起来令⼈望⽽⽣畏，但⼿动执⾏此操作将获得最准确的最终结果，并且钢笔⼯具需要⼀些练习，但使⽤得越多，它就会变得越快。
Don’t know how to use the Pen Tool? here’s a great (~5min)
不知道如何使⽤钢笔⼯具？ 这是⼀个很棒的(〜5分钟)
Remember, you can make multiple paths around different sections of the photo if you for instance wanted to change a hat color as well as the t-shirt.
请记住，例如，如果您想更改帽⼦颜⾊和T恤，则可以在照⽚的不同部分周围制作多条路径。
导出SVG (Exporting Your SVG)
svg canvas
You now have your path around the shirt, fill it with any color to see the result, you can safely delete the underlying photo leaving you with this:
现在，您可以在衬衫周围⾛⼀圈，⽤任何颜⾊填充它以查看结果，可以安全地删除下⾯的照⽚，并为您添加以下内容：
When we export this SVG, it’s important that Illustrator keeps the white space around the shape, because the photo will fill this area on our web page.
导出此SVG时，Illustrator保持形状周围的空⽩很重要，因为照⽚将填充我们⽹页上的该区域。
If you’re using Method Draw instead, go to View > Source, this is done by default
如果您使⽤的是“⽅法绘制”，请转到“视图”>“源”，默认情况下会完成此操作
This isn’t done by default in Illustrator though, so we need to use File > Export > Export for Screens which exports the whole artboard, keeping the relative position intact.
不过，这在Illustrator中默认情况下并未完成，因此我们需要使⽤“⽂件”>“导出”>“屏幕导出”来导出整个画板，并保持相对位置不
变。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。