Svg horizontal dashed circle
I am trying to create the following as SVG:
those. circle with dashed horizontal lines.
This is the SVG code I have at the moment ... generated by Adobe Illustrator:
<?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>
But when I open in Chrome, the lines appear very jagged and some lines are closer than others.
Is there a better way to create this SVG or am I just using PNG?
source to share
Here's a different approach to create the same look that should be more stable to render using actual line segments rather than very short strokes.
I used <defs>
and <use>
to keep the repetition correct. I define four axes aligned with an axis around the center, and then rotate them by a quarter circle of even steps. (I changed the scale a bit for the sake of round numbers in my example.)
Note that if the enlarged image is slightly different: in the original, each dash will be slightly wedge-shaped (due to the curved circle), whereas here they will have a constant width, since they are simple line segments.
<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>
This is an SVG-in-HTML snippet - if you use it as a separate SVG document, remember to paste it again xmlns
.
source to share
Here is an alternative approach with the same counts and tick size.
<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>
source to share