把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元素开始页面设计：

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

因为元素不是自己呈现的，所以只有在用JavaScript完成后，才能“看到” SVG。 将用作在圆上放置元素的指南，包括短度和长度线(分别为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 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指定的量递增。 每次增加一个元素。 如果增加的量可以通过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