I been struggling for hours to solve this, I'm trying to draw elliptical arc to fill up the spaces circled in red, can I have some sample code for it?
EDIT:
Since shape is generated using JavaScript, I will add SVG Elements generated from browser:
<svg width="500" height="500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">
<path d="M 375,300 a 1 1 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>
<path id="__currentVal__" d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="skyblue"></path>
</svg>
The blue shape will be the element with id __currentVal__, the elliptical arc command will inserted at end of command M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212
The expected output will be like this (edited using MS Paint):
This is the d attribute you are using: d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 "
M 75,300 means that you are moving to the point x:75, y:300.
Since you are using lower case commands those are relative commands. For instance l 150,0 means that you are moving 150 units in x from 75 to 225. The y doesn't change meaning that the y:300. The center of the arc is in this point: x:225,y:300.
This part of the command is also letting me know that the radius of the arc is 150.
Next the path (l -106.06601717798213,-106.06601717798212) goes from the previous point x:225 y:300 to the point x:225-106.06601717798213 = 118.93398282201787, y:300-106.06601717798212 = 193.93398282201787
I'm drawing a small circle to visualise this point (x:118.93398282201, y:193.93398282201787 ). The arc will start here. Also I'm drawing another small circle in the point x:75,y:300. The arc will end here. Now I can draw the arc: M118.93398282201,193.93398282201787 A 150,150 0 0 0 75,300
<svg viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">
<path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>
<path id="__currentVal__"d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" ></path>
<circle cx="75" cy="300" r="5"/>
<circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
<path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300" />
</svg>
If you happen to need to draw the arc in the same path as the actual blue triangle you can do this: you start your path with the arc, then you use the d attribute of your path without the first (move to) command. You don't need to move to this point since you are already there (the arc is ending in this point)
<svg viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">
<path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>
<circle cx="75" cy="300" r="5"/>
<circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
<path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300
l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" />
</svg>
You can remove those 2 small circles I've drawn as helpers to let me visualise the points of your path.
Related
This question already has an answer here:
Declaratively stroke a line with a composite line symbol using SVG
(1 answer)
Closed 7 months ago.
Is there a better solution to add to a path element a dashed border (lets say the border should have an offset of 2px in each direction)
I am looking for a general solution for a lot of path elements
For example my initial path element would be
<path stroke="black" fill="none" d="M10 10 L 50 10 L 50 80 L 10 80 Z"></path>
and at the moment I am creating another path element to add the border around the initial path element
<path stroke="black" stroke-dasharray="3" fill="none" d="M6 6 L 54 6 L 54 84 L 6 84 Z"></path>
<svg height="1000" width="1000">
<path stroke="black" fill="none"
d="M10 10 L 50 10 L 50 80 L 10 80 Z"></path>
<path stroke="black" stroke-dasharray="3"
fill="none" d="M6 6 L 54 6 L 54 84 L 6 84 Z"></path>
</svg>
"a general solution for a lot of path elements" is pretty vague. I'll handle simple closed paths in this answer.
This way may actually be more of an example how not to do it, but I think it shows a general problem with what you try to achieve. It uses only one place to define a path, and then re-uses it in three other places:
first, to draw the inner border,
then, to draw a much wider dashed border,
and finally, as a mask to hide that part of the dashed border that would otherwise overlap the inner one.
This has the advantage of not having to create extra paths, but the dashed border looks strange. The corners either show gaps or exta-long dashes, and in curved sections the length of the dashes are differing.
.distance {
stroke-width: 6;
}
.inner {
fill:none;
stroke: black;
stroke-width: 2;
}
.outer {
stroke: black;
stroke-width: 10;
stroke-dasharray: 4;
stroke-dashoffset: 2;
}
<svg viewBox="0 0 100 100" width="200" height="200">
<defs>
<path id="src" d="M 32,13 20,42 Q 30,90 85,90 L 92,53 Q 60,53 60,13 Z" />
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<use class="distance" href="#src" stroke="black" />
</mask>
</defs>
<use class="inner" href="#src" />
<use class="outer" href="#src" mask="url(#mask)" />
</svg>
Why is that so? The dashes are computed in relation to where the original path is, but what is shown is only the outer fringe of the whole stroke, at an offset. (or to put it the other way round, the path defining where dashes start and end is at an offset from the middle of the shown dashed line.) For concave sections, dashes get longer, and for convex sections, shorter.
The only way the dash length can be stable is when the path used to compute dashes sits in the middle of the dashes. You could change the order around and define the dashes on the inner border:
.distance {
stroke-width: 6;
}
.inner {
fill:none;
stroke: black;
stroke-width: 2;
stroke-dasharray: 4;
}
.outer {
stroke: black;
stroke-width: 10;
}
<svg viewBox="0 0 100 100" width="200" height="200">
<defs>
<path id="src" d="M 32,13 20,42 Q 30,90 85,90 L 92,53 Q 60,53 60,13 Z" />
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<use class="distance" href="#src" stroke="black" />
</mask>
</defs>
<use class="inner" href="#src" />
<use class="outer" href="#src" mask="url(#mask)" />
</svg>
..but that is as far as you get. The bottom line remains: you need to have a path where the dashed line is, not at an offset.
Use a native JavaScript Web Component <svg-outline> (you define once)
to do the work on an <svg>
<svg-outline>
<svg viewBox="0 0 100 100" height="180">
<path outline="blue" fill="none" d="M5 5 L 50 30 L 50 40 L 10 80 Z"/>
</svg>
</svg-outline>
The Web Component clones your original shapes (marked with "outline" attribute)
sets a stroke and stroke-dasharray on it
removes any existing fill
transforms clone
translates clone to account for scale(1.2)
scales clone to 1.2 size
then corrects translate
SO snippet output:
See JSFiddle: https://jsfiddle.net/WebComponents/2goahcqv/
<svg-outline>
<style> circle[outline] { stroke: blue } </style>
<svg viewBox="0 0 100 100" height="180">
<rect outline="green" x="15" y="15" width="50%" height="50%" stroke="blue" fill="teal"/>
<circle outline fill="lightcoral" cx="50" cy="50" r="10"/>
</svg>
</svg-outline>
<svg-outline>
<svg viewBox="0 0 100 100" height="180">
<path outline="blue" fill="pink" d="M15 10 L 50 30 L 50 40 L 20 70 Z"/>
</svg>
</svg-outline>
<script>
customElements.define("svg-outline", class extends HTMLElement {
connectedCallback() {
setTimeout(() => { // make sure innerHTML is parsed
let svg = this.querySelector("svg");
svg.querySelectorAll('[outline]').forEach(original => {
let outlined = svg.appendChild(original.cloneNode(true));
original.after(outlined); // so we don't create "z-index" issues
let outline_stroke = outlined.getAttribute("outline") || false;
if (outline_stroke) outlined.setAttribute("stroke", outline_stroke );
original.removeAttribute("outline"); // so we can use CSS on outlines
let {x,y,width,height} = original.getBBox();
let cx = x + width/2;
let cy = y + height/2;
outlined.setAttribute("fill", "none"); // outlines never filled
outlined.setAttribute("stroke-dasharray", 3); // or read from your own attribute, like "outline"
outlined.setAttribute("transform", `translate(${cx} ${cy}) scale(${1.2}) translate(-${cx} -${cy})`);
});
// (optional) whack everything into shadowDOM so styles don't conflict
this.attachShadow({mode:"open"}).append(...this.children);
})
}
})
</script>
This SVG is intended to appear in a 30x30 square, and I've gotten it to look right in this code pen:
https://codepen.io/pgblu/pen/RwrYXXm
HTML
<span class="foo">
<svg height="30" width="30" viewBox="0 0 450 450">
<g
id="layer1"
transform="translate(-2887.5916,-192.36151)"
>
<g transform="matrix(1.3580428, 0, 0, 1.3580428, 2065.078, 44.928302)" id="layer2" />
<path
transform="matrix(1.1703715, 0, 0, 1.1703715, 1772.3948, -189.9379)"
d="M 1338.5714, 519.50507 A 192.85715, 192.85715 0 0 1 1145.7142, 712.36221 192.85715, 192.85715 0 0 1 952.85709, 519.50507 192.85715, 192.85715 0 0 1 1145.7142, 326.64792 192.85715, 192.85715 0 0 1 1338.5714, 519.50507 Z"
id="redCircle001"
style="fill:#dd0e00;fill-opacity:1;fill-rule:nonzero;stroke:none"
/>
<g transform="matrix(-3.1435529, 0, 0, -3.1435529, 10926.161, -138.49162)">
<path
style="fill:#ffffff"
d="m2494.1163, -202.23709 l4, 84.92415 l-25.67715, 0 l4, -84.92415 z"
id="whiteBeam001"
/>
<circle
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="whiteDot001"
transform="matrix(0.3181114, 0, 0, 0.3181114, 2440.9065, -251.44719)"
cx="139.73659"
cy="101.28652"
r="36.22654"
/>
</g>
</g>
</svg>
</span>
CSS:
.foo {
border: 1px solid #ffaa22;
height: 30px;
width: 30px;
}
...but I had to trial-and-error the viewBox directive and ended up with "0 0 450 450". I am clearly doing this wrong. Shouldn't the viewBox correspond to the target size, i.e., "0 0 30 30"? Is there something in the SVG code itself that is making the resizing counterintuitive?
I would like to replace the green shape in the middle with a background image (only in the white area).
Image with a green shape
For that image I would like to be able to set the CSS properties (or SVG equivalents) such as background-position: xx% xx% and transform: scale(xx). These to be able to change the image position in any direction, and to be able to zoom it in or out.
I have tried this with a path pattern, but it's not proportional and neither good looking:
See what I tried
I would like to keep the blue border and only put the image inside the white circle, in the very middle of it.
Part of the confusion may be that you have put your image inside of <g> groups which have transforms on them. If you move the image outside of those <g> elements, coordinates are much easier to deal with.
Now, there are (at least) two ways to cut your image into a circle and place it where you want:
Use a path with a <pattern>/<image> fill (much like in your example).
Use an <image> element with a clip-path.
See the comments about these alternatives near the end of this SVG:
<svg viewBox="0 0 170.08 170.08" width="170.08" height="170.08" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="matrix(1.333333, 0, 0, -1.333333, 0, 170.080002)" id="g10">
<g transform="scale(0.1)" id="g12">
<path id="path14" style="fill:#fffd51;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 1275.59,0 H 0 V 1275.59 H 1275.59 V 0"></path>
<path id="path16" style="fill:#deddde;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 637.797,70.8711 c -313.109,0 -566.9337,253.8169 -566.9337,566.9219 0,313.109 253.8247,566.937 566.9337,566.937 313.105,0 566.923,-253.828 566.923,-566.937 0,-313.105 -253.818,-566.9219 -566.923,-566.9219 z M 0,1275.59 V 0 H 1275.59 V 1275.59 H 0"></path>
<path id="path18" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1182.7,803.25 -83.09,-27.371 c 0,0 -15.88,47.094 -28.69,73.266 l 78.42,34.035 c -36.89,82.5 -92.99,138.56 -92.99,138.56 l -56.31,-66.342 c -88.317,100.652 -217.81,164.272 -362.231,164.272 -6.926,0 -13.793,-0.23 -20.645,-0.52 l 9.481,85.56 c 0,0 -79.282,3.67 -164.434,-26.6 l 29.719,-80.97 c -25.43,-8.07 -49.903,-18.26 -73.313,-30.25 l -37.254,78.35 C 300.449,1105 244.98,1047.7 244.98,1047.7 l 68.875,-53.161 C 216.836,906.391 155.918,779.199 155.918,637.781 c 0,-2.597 0.156,-5.156 0.195,-7.742 l -85.2341,11.035 c 0,0 -4.8008,-79.211 23.4063,-165.07 l 80.8318,27.16 c 7.465,-25.695 16.879,-50.547 28.313,-74.277 l -77.184,-34.453 c 38.281,-81.875 93.649,-139.735 93.649,-139.735 l 54.214,67.145 C 361.871,220.91 490.852,156.828 634.902,155.969 L 620.797,69.3594 c 0,0 78.945,-4.9375 166.043,19.1406 l -24.949,83.602 c 25.769,6.847 50.644,15.828 74.519,26.648 l 31.36,-79.398 c 83.601,34.328 141.38,88.66 141.38,88.66 l -64.712,58.008 c 107.042,88.394 175.252,222.105 175.252,371.761 0,4.434 -0.21,8.821 -0.33,13.223 l 84.98,-13.211 c 0,0 5.12,79.141 -21.64,165.457"></path>
<path id="path20" style="fill:none;stroke:#bdbcbc;stroke-width:2.18309999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 1077.17,637.781 c 0,-242.656 -196.705,-439.359 -439.361,-439.359 -242.657,0 -439.371,196.703 -439.371,439.359 0,242.657 196.714,439.369 439.371,439.369 242.656,0 439.361,-196.712 439.361,-439.369 z"></path>
<path id="path22" style="fill:#234d86;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 637.809,1070.07 c -238.746,0 -432.286,-193.543 -432.286,-432.289 0,-238.738 193.54,-432.281 432.286,-432.281 238.738,0 432.281,193.543 432.281,432.281 0,238.746 -193.543,432.289 -432.281,432.289 z m 0,-115.004 c 174.949,0 317.285,-142.332 317.285,-317.285 0,-174.949 -142.336,-317.285 -317.285,-317.285 -174.954,0 -317.286,142.336 -317.286,317.285 0,174.953 142.332,317.285 317.286,317.285"></path>
<g transform="scale(10)" id="g24"></g>
<g transform="translate(637.5,637.5) scale(1, -1) translate(-637.5,-637.5)">
<path id="top-text" d="M 637.5 637.5 m -340 0 a 340 340 0 0 1 680 0" fill="none" stroke="none"></path>
<text font-stretch="ultra-condensed" text-anchor="middle" stroke-width="2" style="white-space: pre" font-family="Arial" font-size="42" fill="#FFFFFF" stroke="#FFFFFF">
<textPath baseline-shift="10%" font-stretch="ultra-condensed" startOffset="50%" xlink:href="#top-text">test</textPath>
</text>
</g>
<g transform="translate(637.5,637.5) scale(-1, 1) translate(-637.5,-637.5)">
<path id="bottom-text" d="M 637.5 637.5 m 340 0 a 340 340 180 0 0 -680 0" fill="none" stroke="none"></path>
<text font-stretch="ultra-condensed" text-anchor="middle" stroke-width="2" style="white-space: pre" font-family="Arial" font-size="42" fill="#FFFFFF" stroke="#FFFFFF">
<textPath baseline-shift="-90%" font-stretch="ultra-condensed" startOffset="50%" xlink:href="#bottom-text">text text text</textPath>
</text>
</g>
</g>
</g>
<!--
Alternative 1: A path (e.g. a <circle>) with an image fill.
Note: The size of the pattern's <image> must correspond to the path's size (here: 40% diameter).
-->
<pattern id="path138img" patternUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="https://configurator.kriger.nl/uploads/cropped/kingfischer_1.jpg" width="40%" height="40%" />
</pattern>
<circle id="path138" cx="50%" cy="25%" r="20%" fill="url(#path138img)" />
<!--
Alternative 2: An <image> with a clipPath (e.g. a <circle>).
Note: With `objectBoundingBox`, the coordinates for the clipPath's <circle> are relative to the clipped image, ranging from 0 to 1.
-->
<clipPath id="myClip" clipPathUnits="objectBoundingBox" >
<circle cx=".5" cy=".5" r=".5" />
</clipPath>
<image x="30%" y="55%" width="40%" height="40%" clip-path="url(#myClip)" xlink:href="https://configurator.kriger.nl/uploads/cropped/kingfischer_1.jpg" />
</svg>
Where the scaling and positioning is set:
I am trying to design a logo with some text around a circle and I can't get the text to be correctly oriented. I am using plain SVG written by hand without JS. Would you know how to solve this? Here what I have so far:
.full {
fill:none;
stroke:#000000;
stroke-width:0.6px;
}
.letters {
font-size: 4px;
text-align: center;
}
.letters textPath {
/*dominant-baseline: middle;*/
text-anchor: middle;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 30" width="150mm" height="150mm">
<g transform="translate(+0,+25) scale(+1,-1)">
<g transform="translate(+05,+05)">
<path class="full" d="M17.696252,2.152991 A 11 11 0 0 0 -3.554116,2.152991" />
<path class="full" d="M-1.355421,12.070664 A 11 11 0 0 0 3.308846,15.336619" />
<path class="full" d="M12.571068,14.526279 A 11 11 0 0 0 16.597347,10.500000" />
<path id="txt1" fill="none" d="M-3.554116,2.152991 A 11 11 0 0 0 -1.355421,12.070664" />
<path id="txt2" fill="none" d="M3.308846,15.336619 A 11 11 0 0 0 12.571068,14.526279" />
<path id="txt3" fill="none" d="M16.597347,10.500000 A 11 11 0 0 0 17.696252,2.152991" />
<text class="letters"><textPath xlink:href="#txt1" startOffset="50%">txt1</textPath></text>
<text class="letters"><textPath xlink:href="#txt2" startOffset="50%">txt2</textPath></text>
<text class="letters"><textPath xlink:href="#txt3" startOffset="50%">txt3</textPath></text>
</g>
</g>
</svg>
transform="scale(+1,-1)" causes vertical flip below of its descendants; you'll have to either omit that or negate this by adding extra transform="scale(+1,-1)" to each text node and its path.
I faced the same question as Rufus. I had to draw a circle made of different slices and the slices had text on them. I didn't found a solution on the internet, so i had to figure out a way to accomplish this. I did it this way.
The first question was how to draw the slices. I found the excellent work of Daniel Pataki on this matter (https://danielpataki.com/svg-pie-chart-javascript/). I calculated the values as described in the page, for a slices with an angle of 30 degrees. I used the <g> tag to rotate the slices together with the text.
Then I rotated the (with the slices and the text) 12 times (12 x 30 = 360):
<circle cx="350" cy="350" r="300" fill="transparent" />
<? $t = 1; for($t == 1; $t <= 12; $t++) {
$transform = ($t > 1) ? "transform='rotate(" . ($t-1) * 30 . ", 350, 350)'" : "";
$fillcolor = "#912184";
?>
<g <?echo $transform ?> >
<path fill="<?echo $fillcolor ?>" d="M350,350 L350,50 A350,350 1 0,1 500, 90.19238 z"></path>
<text style="font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="130" transform="rotate(-73, 350, 350)"><?echo $captions[$t-1] ?></text>
</g>
<? } ?>
Now I have 12 same-sized slices filling up the circle. The text (from some array $captions) is placed in the slices, but on the left half of the circle, up-side-down. That's not very readable. I tried to rotate in different ways, but without success. But what did the trick for me, was a) change the rotation angle and b) shift the text more along the path using the dx parameter only for the texts on the left side of the circle (i.e $t > 6):
<circle cx="350" cy="350" r="340" fill="#FA864D" />
<circle cx="350" cy="350" r="300" fill="transparent" />
<? $t = 1; for($t == 1; $t <= 12; $t++) {
$transform = ($t > 1) ? "transform='rotate(" . ($t-1) * 30 . ", 350, 350)'" : "";
$fillcolor = '#912184';}
?>
<g <?echo $transform ?> >
<path fill="<?echo $fillcolor ?>" d="M350,350 L350,50 A350,350 1 0,1 500, 90.19238 z"></path>
<? if ($t <= 6) { ?>
<text style="font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="130" transform="rotate(-73, 350, 350)"><?echo $captions[$t-1] ?></text>
<? } else { ?>
// combination of shift and rotation changed only for the left half of the circle did the trick
<text style="text-anchor: start; font-family: 'Roboto', sans-serif; font-size: 22px" x="350" y="350" fill="#fff" dx="-250" transform="rotate(103, 350, 350)"><?echo $captions[$t-1] ?></text>
<? } ?>
</g>
<? } ?>
Now it looks good and the text is readable. If you wish, you can change the text-anchor parameter, to position the text in the slices to your demand. I hope this will help others too.
Regards,
I had a similar issue, I found that swapping the positions of the x,y and x1,y1 parameters in the path element fixed it. The order that these were listed in in the path element effected the orientation of the text (at least in my case).
So I can make the following path, but I need the shape flipped so that the flat joining line (X) is on the bottom. I also need it to stretch the full width of its container.
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L30 50 L100 0 Z"></path>
</svg>
With respect to flipping the shape, you can use a transform on the path, scaling the y-axis by -1. This will flip the shape up and "out" of view, so you also need to translate it down. If you want it to end up with exactly the same upper and lower boundaries as pre-flipped (as opposed to, say, at the bottom of its container, etc.) then you have to translate it down by the height of the shape, i.e. 50px in your example.
With respect to wanting it stretched to the full width of its container, the code in your question already contains the answer, i.e. width="100%". This is shown by placing the triangle into a div that is 250px wide. Contrast this with the original shape (on the left) with width of 100 not 100%.
div {
width: 250px;
height: 70px;
border: solid red 2px;
}
original: unflipped, untranslated, unstretched:
<div>
<svg id="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 0) scale(1, 1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>
altered: flipped, translated, stretched:
<div>
<svg id="bigTriangleColor1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 50) scale(1, -1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>