當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/12 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了把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 <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:

用于制作指南針線的腳本已添加到文檔的末尾：

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中才有效)。

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