SVG水平虚线圈

Question

我尝试将以下内容创建为SVG：

即。带有虚线水平线的圆圈。

这是我目前拥有的SVG代码...由Adobe Illustrator生成：

＆＃13;

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="165px" height="165px" viewBox="0 0 165 165" enable-background="new 0 0 165 165" xml:space="preserve">
<g>
	
  <circle fill="none" stroke="#000000" stroke-width="9" stroke-miterlimit="23" stroke-dasharray="1.0048,6.0288" cx="82.453" cy="82.563" r="75"/>
</g>
</svg>

＆＃13;

＆＃13;

＆＃13;

但是当我在Chrome中打开时，线条似乎非常锯齿状，有些线条比其他线条更接近。

有没有更好的方法来制作这个SVG，还是只使用PNG？

Answer 1

这是一种不同的方法，通过使用实际的线段而不是非常短的笔划，产生相同的外观，在渲染器上应该更稳定。

我已经使用<defs>和<use>来保持重复的理智 - 我在中心周围定义了四条轴对齐线，然后将其旋转四分之一圆的偶数步。 （在我的例子中，为了圆号，我改变了比例。）

请注意，如果放大它会略有不同：在原件中，每个短划线将略呈楔形（由于圆的曲线），而在这里它们将具有恒定的宽度，因为它们只是简单的线条段。

<svg width="160px" height="160px" viewBox="0 0 160 160">
  <defs>
    <g id="lines" style="stroke: black;">
      <line x1=" 71" x2=" 79" />
      <line x1="-71" x2="-79" />
      <line y1=" 71" y2=" 79" />
      <line y1="-71" y2="-79" />
    </g>
  </defs>
  <g transform="translate(80 80)">
    <use xlink:href="#lines" transform="rotate( 0)"/>
    <use xlink:href="#lines" transform="rotate( 5)"/>
    <use xlink:href="#lines" transform="rotate(10)"/>
    <use xlink:href="#lines" transform="rotate(15)"/>
    <use xlink:href="#lines" transform="rotate(20)"/>
    <use xlink:href="#lines" transform="rotate(25)"/>
    <use xlink:href="#lines" transform="rotate(30)"/>
    <use xlink:href="#lines" transform="rotate(35)"/>
    <use xlink:href="#lines" transform="rotate(40)"/>
    <use xlink:href="#lines" transform="rotate(45)"/>
    <use xlink:href="#lines" transform="rotate(50)"/>
    <use xlink:href="#lines" transform="rotate(55)"/>
    <use xlink:href="#lines" transform="rotate(60)"/>
    <use xlink:href="#lines" transform="rotate(65)"/>
    <use xlink:href="#lines" transform="rotate(70)"/>
    <use xlink:href="#lines" transform="rotate(75)"/>
    <use xlink:href="#lines" transform="rotate(80)"/>
    <use xlink:href="#lines" transform="rotate(85)"/>
  </g>
</svg>

这是一个SVG-in-HTML片段 - 如果将其作为独立的SVG文档使用，请不要忘记重新放入xmlns。

Answer 2

这是一种具有相同滴答计数和刻度尺寸的替代方法。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="165px" height="165px" viewBox="0 0 165 165">
  <g transform="translate(82.453 82.563)">
    <g id="t32">
      <g id="t16">
        <g id="t8">
          <g id="t4">
            <g id="t3">
              <rect x="70.5" y="-0.5024" width="9" height="1.0048" id="t"/>
              <use xlink:href="#t" transform="rotate(5.37)"/>
              <use xlink:href="#t" transform="rotate(10.75)"/>
            </g>
            <use xlink:href="#t" transform="rotate(16.12)"/>
          </g>
          <use xlink:href="#t4" transform="rotate(21.49)"/>
        </g>
        <use xlink:href="#t8" transform="rotate(42.99)"/>
      </g>
      <use xlink:href="#t16" transform="rotate(85.97)"/>
    </g>
    <use xlink:href="#t32" transform="rotate(171.94)"/>
    <use xlink:href="#t3" transform="rotate(343.88)"/>
  </g>
</svg>