Displaying this SVG at width=100px is fine, but on Chrome & Edge & Brave width=110px distorts the gold slice.
FireFox displays the slices correct.
Anything I can do to fix it in Chromium?
<style>
svg {
background: teal;
}
</style>
<svg width="100px" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 110 110" stroke-width="50" >
<path stroke-dasharray="90 270" stroke-dashoffset="90" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="90" stroke="blue"></path>
<path stroke-dasharray="45 315" stroke-dashoffset="135" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="45" stroke="gold"></path>
<path stroke-dasharray="30 330" stroke-dashoffset="165" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="30" stroke="red"></path>
</svg>
<svg width="110px" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 110 110" stroke-width="50">
<path stroke-dasharray="90 270" stroke-dashoffset="90" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="90" stroke="blue"></path>
<path stroke-dasharray="45 315" stroke-dashoffset="135" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="45" stroke="gold"></path>
<path stroke-dasharray="30 330" stroke-dashoffset="165" pathLength="360"
d="M82.5 55a27.5 27.5 0 1 0-55 0a27.5 27.5 0 1 0 55 0" fill="none" value="30" stroke="red"></path>
</svg>
Related
Can you help me align the icon into the middle of the circle?
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M11.5 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2 12.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zm9 2v-7h1v7h-1zm0 3V16h1v1.5h-1z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M7.92 2.514A1 1 0 0 1 8.794 2h1.412a1 1 0 0 1 .874.514l7.209 12.977a1 1 0 0 1-.042 1.04l-.683 1.024a1 1 0 0 1-.832.445H2.267a1 1 0 0 1-.832-.445L.753 16.53a1 1 0 0 1-.042-1.04l.437.242-.437-.242L7.92 2.514zM10.206 3H8.794L1.585 15.976 2.267 17h14.465l.683-1.024L10.205 3zM9 12.5V7h1v5.5H9zM9 15v-1.25h1V15H9z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24"><g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M9.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM2 10.5a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0z" clip-rule="evenodd" fill="#FFF"/><path fill-rule="evenodd" d="M9 14.75V13.5h1v1.25H9zM9.5 7A1.5 1.5 0 0 0 8 8.5H7a2.5 2.5 0 1 1 3.118 2.423.221.221 0 0 0-.104.058.07.07 0 0 0-.014.02v1.249H9V11c0-.574.457-.94.872-1.046A1.5 1.5 0 0 0 9.5 7z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
I have the following svg icon that I want to change the color of to #2F855A:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" fill="#2F855A" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
How do I do that?
.icon{
width:100px;
height:100px;
}
<svg class="icon" fill="none" stroke="#2f2f2f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
You need to use stroke attribute on svg. You can choose any value you want. for example stroke="#2f2f2f will set the color as dark gray.
I'm trying to make an svg animation for a path. The start result and the end result are fine, but for some reasons there are no intermediate positions (the animation just jumps from start to end after the duration.
This is the code I'm using:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:10px;}</style></defs><title>percentage-green</title>
<path
id="p1"
class="cls-1"
d="
M 20 40 A 20 20 0 1 0 40 20
"
/>
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
from="M 20 40 A 20 20 0 1 0 40 20"
to="M 50 57.32050807568877 A 20 20 0 0 0 40 20"
dur="10s"
/>
</svg>
If I understand you correctly, despite the difficulties you want to do an arc animation.
Arc formula
<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />
Large-arc-flag and sweep-flag are integer-constant, which take only two values of "0" or "1" and do not lend themselves to smooth animation.
You can make a discrete transition animation from a large arc when Large-arc-flag = 1 to a small arcLarge-arc-flag = 0
On the example below the location of the small arc is indicated by a red dashed line.
The coordinates of the beginning and end of the small and large arcs coincide, only the value of the flag `Large-arc-flag from" 1 "to" 0 "
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
class="cls-1"
d="M 20 40 A 20 20 0 1 0 40 20">
<animate
attributeName="d"
attributeType="XML"
repeatCount="5"
begin="Layer_1.mouseover"
from="M 20 40 A 20 20 0 1 0 40 20"
to="M 20 40 A 20 20 0 0 0 40 20"
dur="2s" >
</animate>
</path>
<circle cx="40" cy="20" r="3" stroke="dodgerblue" fill="none" />
<path d="M 20 40 A 20 20 0 0 0 40 20" stroke-dasharray="3" stroke="red" fill="none" />
</g>
</svg>
Animation begins when you hover the cursor
The second example
Is similar to yours - the parameter "d" of the patch will change smoothly, with the constant value of large-arc-flag = 1 (large arc)
Animation begins when you hover the cursor
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
class="cls-1"
d="M 20 40 A 20 20 0 1 0 40 20">
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
repeatCount="5"
values="M 20 40 A 20 20 0 1 0 40 20;M 50 57 A 20 20 0 1 0 40 20;M 20 40 A 20 20 0 1 0 40 20"
begin="Layer_1.mouseover"
dur="3s"
restart="whenNotActive" >
</animate>
</path>
<circle cx="40" cy="20" r="4" stroke="dodgerblue" fill="none" />
<path d="M 50 57 A 20 20 0 1 0 40 20" stroke-dasharray="3" stroke="red" fill="none" />
</g>
</svg>
I have this code for inline svg icon:
#Icon = React.createClass
render: ->
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>img</title>
<g stroke-width="2" stroke="#0070D9" fill="none" fill-rule="evenodd">
<path d="M2 1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
<path d="M1.652 14.514l4.956-6.279 5.448 5.579 6.398-5.579M13 3.95a2.05 2.05 0 1 1 0 4.1 2.05 2.05 0 0 1 0-4.1z"/>
</g>
</svg>
But react skip all properties with -, like: stroke-width="2"
Use camelCase. For example: strokeWidth instead of stroke-width. I've made a fiddle with working example.
I want to create a circular path with multiple "Holes" in it, preferably without using masks and the like.
Currently, what I've got is this:
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 400 400">
<path d="M 100 100 A 90 90 0 1 0 200 100 M 110 90 A 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" />
</svg>
As you can see, this relies on manually moving the start of the new arc, which results in the arc being off.
I'd rather not have to do a lot of math to get the position for the move just right, so is there a sort of "Arc move" I can use?
If not, how does the math for this work (I'm very rusty in geometry stuff)
The simplest way to achieve what you want is probably just to use a dash array.
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 400 400">
<path d="M 100 100 A 90 90 0 1 0 200 100 M 110 90 A 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" />
<path d="M 60 175 A 90 90 0 0 1 240 175 A 90 90 0 0 1 60 175" stroke="red" stroke-width="5" fill="transparent" stroke-dasharray="88 14 78 14 372"/></svg>