Hi everyone I want to make a delete Button that when I press it until the result will come back it spins and then when I got the right response make it Green with checkmark inside (I make it already) but when I get that I miss fields I want to get a red circle with Cancel Icon inside.
I don't really good in SVG yet and I would like your help
the code bellow this is the SVG I made after search on the internet
but I Searched a lot of time the Cancel Icon and couldn't find anything that fit what I Need
<svg width="84px" height="84px" viewBox="0 0 84 84" version="1.1">
<circle className="border" cx="42" cy="42" r="40" stroke-linecap="round" stroke-width="4" stroke="#000" fill="none"></circle>
<path className="checkmark" stroke-linecap="round" stroke-linejoin="round" d="M23.375 42.5488281 36.8840688 56.0578969 64.891932 28.0500338" stroke-width="4" stroke="green" fill="none"></path>
</svg>
the closest thing I could make is this:
I would like the cancel sign to be in the middle
Your code shows you have used stroke="greem" instead of stroke="green" in path tag.
<svg width="84px" height="84px" viewBox="0 0 84 84" version="1.1">
<circle className="border" cx="42" cy="42" r="40" stroke-linecap="round" stroke-width="4" stroke="#000" fill="none"></circle>
<path className="checkmark" stroke-linecap="round" stroke-linejoin="round" d="M30 55 55 30 M30 30 55 55" stroke-width="4" stroke="green" fill="none"></path>
</svg>
Related
Here is an example:
<svg width="60" height="30">
<path stroke="red" stroke-width="1" fill="none" d="M0 25 L10 25 L45 5 L55 5"/>
</svg>
I find that the inclined line segment has a thinner stroke-width then the horizontal lines. How do I make the stroke-width consistent across the entire path?
Breaking the path into multiple paths did not help as the line joins are not elegant. The points are generated dynamically so the solution needs to be generic.
<svg width="180" height="120">
<g stroke="red" fill="none">
<g stroke-width="1">
<path id="p" d="M0 25l10 0l35-20l10 0" />
<use href="#p" y="25" shape-rendering="optimizeQuality"/>
<use href="#p" y="50" shape-rendering="crispEdges"/>
</g>
<use href="#p" stroke-width="2" x="60"/>
<use href="#p" stroke-width="3" x="120"/>
</g>
</svg>
I added stroke-width 2 and 3 to your example. The effect is less because more pixels are being used to draw the line.
At 1 pixel your monitor and Browser can't make much of it. Only add (some) anti-aliasing.
screenshot zoomed:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering won't help
because it is still your monitor/browser only having 1 pixel to draw that line
Same for CSS https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering..
it is still 1 pixel
Same for setting style="transform:translateZ(0)"
Maybe in the future with Quantum Dot display technology it will look better. https://en.wikipedia.org/wiki/Next_generation_of_display_technology
I have an SVG made up of several circles. The goal is to have different circles filled using different percentages using the dash-array technique.
At the moment, only circle "one" (see circle tag with class="one") is "full". The other two ("two" and "three") are 0.
But am getting a strange artefact when the SVG is viewed in Safari. I can fix this if the make circle.one the last but order is important so I don't want to change, if possible.
Code pen: https://codepen.io/codeload/pen/KXvLEp
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
<circle cx="27" cy="27" r="25" fill="#293741" fill-opacity=".75" stroke-width="4"></circle>
<circle cx="27" cy="27" r="25" fill="transparent" stroke-width="4" stroke-dasharray="156.067915 0" stroke-dashoffset="39.0169787" class="one"></circle>
<circle cx="27" cy="27" r="25" fill="transparent" stroke-width="4" stroke-dasharray="0 156.067915" stroke-dashoffset="0" class="two"></circle>
<circle cx="27" cy="27" r="25" fill="transparent" fill-opacity=".75" stroke-width="4" stroke-dasharray="0 156.067915" stroke-dashoffset="0" class="three"></circle>
</svg>
<svg width="210px" height="210px" viewBox="0 0 210 210" class="donut">
<circle class="donut-ring" cx="105" cy="105" r="95" fill="transparent" stroke="black" stroke-width="20"></circle>
<circle class="donut-segment" cx="105" cy="105" r="95" fill="transparent" stroke="#1a1a1a" stroke-width="20" stroke-dasharray="149.22565104551518 447.67695313654554" stroke-dashoffset="150"></circle>
<circle class="donut-segment" cx="105" cy="105" r="95" fill="transparent" stroke="#333333" stroke-width="20" stroke-dasharray="149.22565104551518 447.67695313654554" stroke-dashoffset="597.6769531365455"></circle>
<circle class="donut-segment" cx="105" cy="105" r="95" fill="transparent" stroke="#434343" stroke-width="20" stroke-dasharray="298.45130209103036 298.45130209103036" stroke-dashoffset="448.45130209103036"></circle>
</svg>
Basically my problem is iv'e created a dynamic doughnut chart where the segments are automatically generated (class="donut-segment"). I need to make all the segments animate simultaneously from their start point to their end point. Iv'e done some pretty extensive searching but i can't find a example quite like mine. Any help at all would be greatly appreciated or just a point in the right direction.
I need the end result to have this effect
https://codepen.io/ksksoft/pen/xsnmp
Solved, Transitioned Stroke-DashArray from "0 and 600" into their proper values, and also transitioned the strokeDashOffset from 0 to its proper value
I've got a bunch of SVGs representing a trip using a polyline.
I'm using non-scaling-stroke vector effect to make sure that each of the polylines is rendered with an absolute width. So when the viewBox's dimension changes, the width of the polyline does not.
At the ends of the mentioned polylines, I wanted to put markers. I would like to have the markers absolutely sized as well. I thought this should be easy by setting the marker units to strokeWidth.
In contrast to what happens with the stroke of the polyline, the size of the markers at the end of a polyline, does change along with the size of the viewBox.
Below I've included an example in where I used simple circles for markers.
<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="131890.80533333332 85178.93015415945 198.25991111111944 205.10300513348193">
<defs>
<marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
<marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
</defs>
<g>
<polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132089.06524444444, 85384.03315929293 131890.80533333332, 85178.93015415945">
</polyline>
</g>
</svg>
<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" viewBox="132038.56071111112 85364.68902323228 50.557866666669725 19.330493533576373">
<defs>
<marker id="end" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
<marker id="start" markerHeight="4" markerUnits="strokeWidth" markerWidth="4" orient="0deg" refX="8" refY="16" viewBox="0 0 16 20">
<circle cx="8" cy="16" fill="#000" r="4"></circle>
</marker>
</defs>
<g>
<polyline fill="none" marker-end="url(#end)" marker-start="url(#start)" stroke="#000" stroke-linejoin="round" stroke-width="3" vector-effect="non-scaling-stroke" points="132038.56071111112, 85364.68902323228 132089.1185777778, 85384.01951676585">
</polyline>
</g>
</svg>
See also: https://jsfiddle.net/u4bmupza/3/
Am I missing some SVG attributes or should I calculate the size of the markers manually?
vector-effect="non-scaling-stroke was first introduced in SVG 1.2 Tiny. That was a subset of SVG intended for for mobile devices with limited power. SVG 1.2 didn't have markers, so this issue wasn't a problem.
vector-effect was about the only thing from SVG 1.2 Tiny that browsers ended up implementing. Unfortunately, this problem was obviously missed at that time, and I guess no one has bothered to report it as a bug. Though I've seen it asked about on S.O. previously.
The good news is that the SVG2 spec specifically notes it as something that should be addressed, though that doesn't help you now.
I want to use the below SVG but the the fill starts from 3 O clock.
I want the fill to start from 12 O clock.
Please give suggestions on how to achieve that.
<svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48"
stroke-dashoffset="0"></circle>
<text id="percentile" x="50%" y="50%" text-anchor="middle" stroke="#191919"
stroke-width="1px" font-size="35" dy="0.3em">{{pct}}</text>
<!--<text id="percentile" x="50%" y="50%" text-anchor="middle" stroke="#191919"
stroke-width="1px" font-size="20" dy="-0.3em">Percentile</text>-->
<circle id="bar" r="90" cx="100" cy="100" fill="transparent"
stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>
I presume you are using the image to show some kind of progress, i.e. it starts at completely gray, then gradually fills up with yellow starting from 3 o'clock as the proportion goes from 0 to 1 (or 0% to 100%), and the image shows what it looks like at 50%. You want to shift the start from 3 o'clock to 12 o'clock.
Update: The original solution I posted here suggested that you could solve this problem by using stroke-dashoffset. However, that solution was incorrect: it only works for small percentages of the circle, and breaks down once you try to fill larger proportions of the circle. The updated solution below shows an implementation of the suggestion in the comments below the original question. It involves rotating the circle. The demo code below also addresses one of the concerns you expressed for this solution in your comments, i.e. the demo code shows that if the rotation is applied only to the circle, it should not affect text that is placed within the circle.
<svg id="svg" width="500" height="200">
<g transform="">
<circle r="90" cx="100" cy="100" fill="none" stroke="gray" stroke-width="20"></circle>
<circle id="bar" r="90" cx="100" cy="100" fill="none" stroke="orange" stroke-width="20" stroke-dasharray="70.69 494.80" transform="rotate(0, 100, 100)"></circle>
<text x="35" y="100" font-family="Verdana" font-size="15">Text inside circle</text>
</g>
<g transform="translate(250)">
<circle r="90" cx="100" cy="100" fill="none" stroke="gray" stroke-width="20"></circle>
<circle id="bar" r="90" cx="100" cy="100" fill="none" stroke="orange" stroke-width="20" stroke-dasharray="70.69 494.80" transform="rotate(-90, 100, 100)"></circle>
<text x="35" y="100" font-family="Verdana" font-size="15">Text inside circle</text>
</g>
</svg>