css使用svg_使用JS和CSS混合模式创建SVG Lotus

css使用svg

In a previous article I talked about SVG’s <use> element and how it can be used to quickly clone and transform copies of pre-existing elements. While it’s relatively straightforward to do this once or twice by hand for an SVG document, a high number of copies really require some form of automated process, most frequently in JavaScript.

在上一篇文章中，我讨论了SVG的<use>元素以及如何将其用于快速克隆和转换先前存在的元素的副本。 尽管对SVG文档手工完成一两次相对比较简单，但实际上，大量副本确实需要某种形式的自动化过程，而这在JavaScript中最为常见。

基地 (The Base)

While it’s possible to create absolutely everything in this illustration using pure JavaScript, it makes sense to start from a base-level markup on the page:

尽管可以使用纯JavaScript在此图中绝对创建所有内容，但从页面上的基本级别标记开始是有意义的：

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<defs>
    <path id="petal" d="M50 5.9c13.6 5.9 21.4 32.9 0 44.1-20.5-10.7-15-38 0-44.1z" />
</defs>
</svg>

The base SVG consists solely of a <path> element inside a definition, meaning that nothing will appear in the document by default. Note the the viewBox is set to 100 by 100 pixels. The rest of the drawing is generated with JavaScript.

基本SVG仅由定义内的<path>元素组成，这意味着默认情况下文档中不会出现任何内容。 请注意， viewBox设置为100 x 100像素。 其余的图形是用JavaScript生成的。

增强JS (Enhancing with JS)

For this illustration I wanted 32 “petals”, meaning that each petal would appear in increments of 11.25 degrees. I created them using a for loop:

对于此插图，我需要32个“花瓣”，这意味着每个花瓣将以11.25度的增量出现。 我使用for循环创建了它们：

for (var i = 0; i < 360; i += 11.25) {
    var useElement = document.createElementNS("http://www.w3.org/2000/svg", "use");
    useElement.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#petal");
    useElement.setAttribute("fill", "hsl("+i+", 62%, 80%)");
	useElement.setAttribute("transform", "rotate("+i+" 50 50)");
	document.querySelector("svg").appendChild(useElement);  
}

One of the benefits of using the HSL color system in CSS is that it uses circular degrees for the hue component: meaning that I could use the same number for the hue of the petal as its physical rotation. That physical rotation is around the 50 50 point of the SVG (i.e. the center of the document) where the inner tip of the single petal pattern also happens to reside.

在CSS中使用HSL色彩系统的好处之一是，它为色相分量使用了圆形度：这意味着我可以为花瓣的色相使用与其物理旋转相同的数字。 该物理旋转围绕SVG的50 50点(即文档的中心)，该位置也恰好位于单个花瓣图案的内尖端。

Note that while setAttribute, querySelector and appendChild are standard JS, the script also uses setAttributeNS, which is uniquely associated in JavaScript with XML-based languages like SVG. I will discuss setAttributeNS in-depth in a future article.

请注意，虽然setAttribute ， querySelector和appendChild是标准JS，但脚本还使用setAttributeNS ，它在JavaScript中与基于XML的语言(如SVG)唯一关联。 我将在以后的文章中深入讨论setAttributeNS 。

融合花瓣 (Blending the Petals)

By default the petals will appear on top of each other, in the order they are generated. I wanted them to appear both semi-transparent and blended with each other. Both of these goals can be achieved with CSS:

默认情况下，花瓣将按照生成的顺序彼此重叠。 我希望它们显示为半透明 并彼此融合 。 这两个目标都可以通过CSS实现：

path { 
  opacity: 0.35; 
  mix-blend-mode: hard-light; 
}

结论 (Conclusion)

Variations on this technique can produce all manner of decorative illustrations very quickly, from mandalas to abstract art, some of which you can discover for yourself by playing around with the associated CodePen demo. I’ll be covering some of those applications in the future.

从曼荼罗到抽象艺术，这种技术的各种变化都可以非常Swift地产生各种装饰插图，您可以通过试用相关的CodePen演示自己发现其中的一些。 将来我将介绍其中一些应用程序。

翻译自: https://thenewcode.com/1107/Creating-an-SVG-Lotus-with-JS-and-CSS-Blend-Modes

css使用svg