把svg图片生成到svg_“迷失”：SVG指南针玫瑰生成器

把svg图片生成到svg

While simple circles and paths are easy enough to generate by hand-coding or a vector application, complex illustrations with regular geometry are often easiest to generate with some programming. A good example of the latter is a compass rose, shown above, which was mostly created using JavaScript.

虽然简单的圆和路径很容易通过手工编码或矢量应用程序生成，但是具有规则几何形状的复杂插图通常最容易通过某些编程生成。后者的一个很好的例子是上面显示的罗盘玫瑰，它主要是使用JavaScript创建的。

标记 (The Markup)

I started the design on the page with a SVG element that contains only symbols:

我从仅包含符号的SVG元素开始页面设计：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" id="compassrose">
<defs>  <symbol><line x1="40" y1="250" x2="50" y2="250" id="roseline" /><line x1="40" y1="250" x2="60" y2="250" id="majline" /><path d="M10,250a240,240 0 1,0 480,0a240,240 0 1,0 -480,0" id="rosecircle" /></symbol></defs>
</svg>

Because <symbol> elements do not render by themselves, the SVG won’t be “seen” until it is completed with JavaScript. The <path> will be used as a guide to place elements on a circle, including the short and long degree lines (roseline and majline, respectively).

因为<symbol>元素不是自己呈现的，所以只有在用JavaScript完成后，才能“看到” SVG。 <path>将用作在圆上放置元素的指南，包括短度和长度线(分别为roseline和majline )。

CSS (The CSS)

The SVG is styled so that it is in the center of the page, and the lines and text provided with an appearance with CSS:

设置了SVG的样式，使其位于页面的中心，并且CSS提供了带有外观的行和文本：

#compassrose { width: 40%;border: 1px solid rgba(255,255,255,0.3);margin-left: 30%;border-radius: 50%;
}
#roseline, #majline {stroke: #eee;stroke-width: .5;
}
#compassrose text {font-family: Montserrat, sans-serif;font-size: 10;fill: #eee;
}

Note the slightly unusual appearance of the svg element, which is given a border-radius to make it appear as the outside of the compass: the SVG element itself can be made to look circular.

请注意svg元素的外观略有不同寻常，该元素具有一个border-radius ，使其看起来像罗盘的外部：SVG元素本身可以看起来是圆形的。

创建线 (Creating the Lines)

The script to make the compass lines is added to the end of the document:

用于制作指南针线的脚本已添加到文档的末尾：

var lineInc = 2,
majMarkDegree = 10,
degreeInc = 30,
compassrose = document.getElementById("compassrose"),
xmlns = "http://www.w3.org/2000/svg",
xlink = "http://www.w3.org/1999/xlink";
if (lineInc > 0) {for (var i=0; i < 360; i+=lineInc) {var newline = document.createElementNS(xmlns,'use'); if (i % majMarkDegree == 0) {           newline.setAttributeNS(xlink,'xlink:href','#majline');} else {newline.setAttributeNS(xlink,'xlink:href','#roseline');}
newline.setAttributeNS(null,'transform','rotate('+i+' 250 250)');
compassrose.appendChild(newline);
}

The variables are:

变量是：

lineInc: how many degrees apart the markings are

lineInc ：标记相隔多少度
majMarkDegree: how many degrees apart the major markings are

majMarkDegree ：主要标记相隔多少度
degreeInc: the numerical separation between the degrees printed around the edge of the circle

degreeInc ：围绕圆边打印的度数之间的数值间隔

The for loop increments by the amount specified by lineInc. At every increment, a <use> element is created. If the incremented amount is divisible by majMarkDegree via a modulus operator, then the majline is used; otherwise, roseline is added instead. Each line is rotated into the orientation provided by i.

for循环以lineInc指定的量递增。每次增加一个<use>元素。如果增加的量可以通过majMarkDegree通过模运算符整除，则使用majline ； majline将使用majline 。否则，将添加roseline线。每条线旋转到i提供的方向。

学位标记 (The Degree Markers)

The degree markers use startOffSet to position the text around the edge of the compass. startOffSet takes values from 0 to 100, so the loop is based on that.

度标记使用startOffSet将文本startOffSet在罗盘边缘周围。 startOffSet的取值范围是0到100 ，因此循环基于该值。

Above 0 - 9 degrees, the printed numeral will be slightly out of alignment on the circle, since the text starts at the degree point. I’ve used a somewhat unusual equation with log to determine how many numerals are in the number, and (if it is longer than a single digit), the script pulls the rotation of the number back by a degree:

高于0-9度时，由于文本始于度点，因此打印的数字将略微偏离圆的对齐方式。我在log使用了一个有点不寻常的方程式来确定数字中有多少个数字，并且(如果它长于一个数字)，脚本会将数字的旋转拉回一个角度：

var writeDegs = document.createElementNS(xmlns,'text'),
currentDeg = 0,
writeOffset = 0;
for (var i=0; i < 99; i+=(degreeInc/360)*100) {var degree = document.createElementNS(xmlns,'textPath');degree.setAttributeNS(xlink,'xlink:href','#rosecircle');var length = Math.log(i) * Math.LOG10E + 1 | 0;if (length > 1) { writeOffset = 1; } degree.setAttributeNS(null,'startOffset',(i - writeOffset)+"%");degree.textContent = currentDeg;writeDegs.appendChild(degree);currentDeg += degreeInc;
}
compassrose.appendChild(writeDegs);

This isn’t perfectly accurate mathematically (to achieve that would require a bit more JavaScript) but it’s close enough for our purposes.

这在数学上并不是完全准确的(要实现这一点需要更多JavaScript)，但对于我们的目的来说已经足够接近了。

动画 (The Animation)

I’ve also animated the compass to sway back and forth using the Web Animation API, using a similar technique to my “Random Walk” article. (Note that this animation will only work in Chrome and Firefox, at least currently).

我还使用与我的“ Random Walk”文章类似的技术，使用Web Animation API制作了指南针来回摆动的动画。 (请注意，此动画至少在Chrome和Firefox中才有效)。

function randomRot() {var oldOrientation = newOrientation;newOrientation =  Math.floor(Math.random() * 240);compassrose.animate([{ transform: 'rotate('+ oldOrientation+'deg)' },{ transform: 'rotate('+ newOrientation+'deg)' }], {duration: Math.abs(oldOrientation - newOrientation) * 30,fill: 'forwards'}).onfinish = function() {randomRot();}
}
newOrientation = 0;
randomRot();

The function compares the oldOrientation of the compass with the newOrientation of the element (a random number between 0 and 240, interpreted as degrees) and animates between them, with a duration calculated as the difference between the orientations multiplied by 30 (interpreted as time in milliseconds).

的函数的比较oldOrientation与罗盘的newOrientation的元件的(0和240之间的随机数，解释为度)和它们之间的动画，用(如取向乘以30之间的差计算的持续时间在解释为时间毫秒)。

结论 (Conclusion)

There are many other ways to create SVG with JavaScript, which I’ll go into more depth in future articles; for now, I hope this might prove a useful starting point for your own experiments.

还有很多其他用JavaScript创建SVG的方法，我将在以后的文章中更深入地介绍。目前，我希望这可以为您自己的实验提供一个有用的起点。

翻译自: https://thenewcode.com/524/Lost-An-SVG-Compass-Rose-Generator

把svg图片生成到svg