把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