SVG Position text relative to parent <g> - svg

I need to place text relative to the parent <g>.
Currently, I have a path and a text element wrapped in a <g>. But all the text coordinates are relative to the outer most <g>.
<svg width="1000" height="550">
<g transform="translate(500,275)" stroke-width="2" stroke="black">
<g>
<path d="M1.6838893488276108e-14,-275A275,275 0 0,1 238.15698604072065,137.49999999999994L0,0Z" id="path_0" style="fill: rgb(17, 17, 17);"></path>
<text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M238.15698604072065,137.49999999999994A275,275 0 0,1 -238.1569860407206,137.50000000000009L0,0Z" id="path_1" style="fill: rgb(34, 34, 34);"></path>
<text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M-238.1569860407206,137.50000000000009A275,275 0 0,1 -5.051668046482832e-14,-275L0,0Z" id="path_2" style="fill: rgb(51, 51, 51);"></path>
<text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
</g>
</svg>

It's hard to see which part of this you're having trouble with, but I'll explain as best I can.
Your SVG picture is 1000 pixels wide and 550 pixels tall:
<svg width="1000" height="550">
The top level node inside this SVG is a <g> node that moves the origin of the coordinate system from the top left corner to (500,275) (i.e., the middle of the drawing area; Y coordinates increase from top to bottom in SVGs)
<g transform="translate(500,275)" ... >
All the children of this top-level node will therefore use this transformed coordinate system. You have added additional <g> nodes as children of this top-level node, but they don't really do anything in this instance because they contain no attributes:
<g>
As a result, the <path> nodes will still be using the same transformed coordinate system that was set up by the top-level <g>. These all produce circular sectors with an apex at (0,0). And since (0,0) corresponds to the middle of the drawing area in this transformed coordinate system, that is where they end up:
<path d="M0-275A275 275 0 0 1 238 137.5L0 0Z" style="fill: rgb(17, 17, 17);"></path>
<path d="M238 137.5A275 275 0 0 1-238 137.5L0 0Z" style="fill: rgb(34, 34, 34);"></path>
<path d="M-238 137.5A275 275 0 0 1 0-275L0 0Z" style="fill: rgb(51, 51, 51);"></path>
Your <text> nodes are also drawn in this coordinate system, but offset by (100,100) because you added a transform attribute to shift them 100 pixels down and 100 pixels to the right:
<text transform="translate(100, 100)" ... >text</text>
So the end result is that all three of your text nodes are drawn at coordinates of (600,375) relative to the top left corner of the drawing area. If you want the text to appear somewhere else, you'll have specify a different offset. For example:
<text transform="translate(120,-80)" ... >text</text>
<text transform="translate(0,160)" ... >text</text>
<text transform="translate(-120,-80)" ... >text</text>
<svg width="1000" height="550">
<g transform="translate(500,275)" stroke-width="2" stroke="black">
<g>
<path d="M0-275A275 275 0 0 1 238 137.5L0 0Z" style="fill: rgb(17, 17, 17);"></path>
<text transform="translate(120,-80)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M238 137.5A275 275 0 0 1-238 137.5L0 0Z" style="fill: rgb(34, 34, 34);"></path>
<text transform="translate(0,160)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
<g>
<path d="M-238 137.5A275 275 0 0 1 0-275L0 0Z" style="fill: rgb(51, 51, 51);"></path>
<text transform="translate(-120,-80)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
</g>
</g>
</svg>

Related

Gap SVG circle/ellipse with vertical linecap edges

I am drawing an SVG ellipse and I want two gaps, positioned center top and bottom:
<ellipse fill="none" stroke="black" stroke-width cx="15" cy="15" rx="12.55" ry="13.45" stroke-dasharray="19.65 1.5 39.32 1.5"/>
But I want the gap edges to be vertical, like if I a straight line was drawn through the un-gapped ellipse:
<g stroke-width="1.5">
<ellipse stroke="black" fill="none" cx="15" cy="15" rx="12.55" ry="13.45"/>
<path stroke="white" d="M15 35 V30">
</g>
I can't do that, because the line is not transparent. The gaps should look like nothing has been drawn there and not alter or overlay the background.
Further unsuccessful experiments:
stroke-linecap="square" on example #1
stroke="transparent" for the line in ex. #2.
stroke="transparent" stroke-occupacy="1" for the line in ex. #2.
What can I do?
jsfiddle
This is a typical case for using a mask. Everything that coincides with the white parts of the mask is drawn as is, everything that coincides with the black parts becomes transparent.
<svg viewBox="0 0 40 40" height="90vh">
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<path stroke="black" stroke-width="5" d="M15 35 V0" />
</mask>
<ellipse stroke="black" fill="none" stroke-width="1.5"
mask="url(#mask)"
cx="15" cy="15" rx="12.55" ry="13.45" />
</svg>

SVG path is not visible

I have the following generated test-SVG (excerpt).
<svg _ngcontent-dhk-c13=""><g _ngcontent-dhk-c13="" hccard="" _nghost-dhk-c12="" ng-reflect-card="[object Object]"><rect _ngcontent-dhk-c12="" id="8261337b-fb4b-4ac9-a213-0d86cc3dc604" width="100" height="100" x="750" y="450"></rect><g _ngcontent-dhk-c12="" hcedge="" _nghost-dhk-c11="" ng-reflect-edge="[object Object]"><path _ngcontent-dhk-c11="" stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path></g><g _ngcontent-dhk-c12="" hcedge="" _nghost-dhk-c11="" ng-reflect-edge="[object Object]"><path _ngcontent-dhk-c11="" stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path></g><!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--></g><!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--></svg>
There should be a <path> element going from 750/450 to 750/600. However nothing is visible. If i move the <path> element outside of its <g> container into the <g> container above that also holds the red <rect>, it is suddenly visible. Any other way to fix this, other than moving the <path> out of the inner <g>?
As #enxaneta said, the rect and path in your SVG are way outside its default viewport. A viewport is the area on your page that the SVG contents are rendered into.
If we use some CSS to make the viewport size visible (light brown area) and make overflow visible, we can see what's happening.
svg {
background-color: linen;
overflow: visible;
transform: scale(0.5);
}
<svg>
<g>
<rect width="100" height="100" x="750" y="450"></rect>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
</g>
</svg>
If you want to fix that, you'll need to do one of two things:
Make the viewport bigger
In the example below, I have made the SVG width and height big enough so that the content is now visible. You may need to scroll down and right to see it.
svg {
background-color: linen;
}
<svg width="850" height="600">
<g>
<rect width="100" height="100" x="750" y="450"></rect>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
</g>
</svg>
Tell the browser where in the SVG your elements are, so that it can draw them inside the viewport. You do this by adding a viewBox.
In the example below, I've chosen viewBox values that define the boundaries of the content. The browser is scaling and moving that content so that it fits in the viewport.
svg {
background-color: linen;
width: 400px;
height: 400px;
}
<svg viewBox="750 450 100 150">
<g>
<rect width="100" height="100" x="750" y="450"></rect>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
<g>
<path stroke="black" stroke-width="2" d="M 750 450 L 750 600 Z"></path>
</g>
</g>
</svg>

Invert textPath letter from up to down along a path without redraw?

I want to reverse the word compared to the line without having to redraw the line, how to do?
/Ps: when I use transform="scale(-1,1)" it doesn't work because the line path is inverted.
You could use <textPath side="..."> for that. However, it's only supported by Firefox right now.
<svg viewBox="0 0 100 55" xmlns="http://www.w3.org/2000/svg">
<path id="curve" fill="none" stroke="limegreen" stroke-width="1" d="M10,5 c20,60 50,50 80,10"></path>
<text font-size="5" dy="-1">
<textPath href="#curve" startOffset="6" side="left">Dangerous curves ahead</textPath>
</text>
<text font-size="5" dy="-1">
<textPath href="#curve" startOffset="9" side="right">Dangerous curves ahead</textPath>
</text>
</svg>
If this is what you have:
body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" ></path>
</defs>
<use xlink:href="#thePath"></use>
<text stroke="#000000" font-size="20">
<textPath xlink:href="#thePath" startOffset="7%">
Some text here
</textPath>
</text>
</svg>
You can apply a transformation transform="scale(-1,1) translate(-250,0)" to the path like so:
body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" transform="scale(-1,1) translate(-250,0)"></path>
</defs>
<use xlink:href="#thePath"></use>
<text stroke="#000000" font-size="20">
<textPath xlink:href="#thePath" startOffset="7%">
Some text here
</textPath>
</text>
</svg>
I hope this is what you need

get coordinates of an SVG element

how it is possible to find the coordinates of an svg element?
I want to add a <rect/> with JS which should cover the <g class="m"/>, so I need to find out the coordinates of the <g>.
I read this post, but it is not for working with JS and this looks to be only for x an y, but I need height and width as well.
<svg class="definition-scale" viewBox="0 0 37960 22350">
<g class="page-margin" transform="translate(200, 200)">
<g class="system" id="system-0000000388984586">
<path d="M2190 720 L2190 6170" stroke="#000000" stroke-width="27"/>
<use height="720px" width="720px" x="2010" xlink:href="#E003" y="720"/>
<use height="720px" width="720px" x="2010" xlink:href="#E004" y="6170"/>
<rect fill="rgba(207, 187, 250, 0.4)" height="?" width="?" x="?" y="?"/>
<g class="m" id="m2">more child elements </g>
<g class="m" id="m3">...</g>
</g>
</g>
</svg>

Some elements not visible in browser in svg image

I have svg file exported from flash, I can open that file in Inkscape and I see clouds and a girl. In browsers the girl is visible but the clouds not. In svg they are the same symbol in defs with two groups, and a use element with xlink:href
The cloud that are not visible look like this:
<defs transform="matrix(1 0 0 1 0 0) ">
<symbol id="Symbol__202" viewBox="0 0 94.9 52.4">
<g id="Warstwa.__202">
<g id="group1">
<path id="path27" fill="#FFFFFF" fill-opacity="1" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z M385.45,18.8 L385.45,18.9 385.35,18.9 385.45,18.8z M375.5,34.75 C375.7,34.45 375.9,34.2 376.15,34 376.2,34.05 376.25,34.1 376.25,34.25 376,34.4 375.75,34.6 375.5,34.75z"/>
<path id="path28" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M440.5,18.3 Q440.5,15 438.1,12.6 C436.55,11.05 434.7,10.3 432.5,10.3 430.25,10.3 428.35,11.05 426.75,12.6 426.15,13.25 425.65,14 425.25,14.8 425.2,11.1 423.85,7.95 421.25,5.35 418.6,2.7 415.35,1.35 411.5,1.35 407.75,1.35 404.55,2.7 401.9,5.35 400.35,6.9 399.3,8.6 398.65,10.45 397.3,9.6 395.75,9.2 394.05,9.2 392.6,9.2 391.25,9.5 390.05,10.15 389.9,7.8 388.95,5.8 387.3,4.1 385.5,2.25 383.3,1.35 380.7,1.35 378.15,1.35 375.9,2.25 374.05,4.1 372.8,5.4 371.95,6.85 371.55,8.5 368.95,6.85 366,6.05 362.7,6.05 358,6.05 353.95,7.7 350.6,11.05 347.25,14.45 345.6,18.5 345.6,23.25 345.6,27.95 347.25,32 350.6,35.45 353.95,38.8 358,40.45 362.7,40.45 366.9,40.45 370.55,39.1 373.7,36.45 372.1,38.4 371.3,40.65 371.3,43.2 371.3,46.1 372.3,48.55 374.35,50.6 376.5,52.7 379,53.75 381.85,53.75 384.75,53.75 387.25,52.7 389.35,50.6 391.4,48.55 392.45,46.1 392.45,43.2 392.45,42.65 392.4,42.2 392.35,41.75 393.3,41.3 394.25,40.7 395.15,40.05 395.7,42.65 397.05,44.95 399.1,47 402,49.9 405.5,51.35 409.55,51.35 413.65,51.35 417.15,49.9 420.05,47 421.05,46.05 421.85,45 422.5,43.85 423.65,44.25 424.85,44.45 426.1,44.45 429.1,44.45 431.65,43.35 433.75,41.2 435.9,39.1 437,36.55 437,33.55 437,30.7 436,28.25 434,26.15 435.55,25.85 436.9,25.1 438.1,23.95 439.7,22.4 440.5,20.55 440.5,18.3z"/>
<path id="path30" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M385.45,18.8 L385.35,18.9 385.45,18.9 385.45,18.8z"/>
<path id="path35" fill="none" stroke="#CCCCCC" stroke-opacity="1" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M375.5,34.75 C375.75,34.6 376,34.4 376.25,34.25 376.25,34.1 376.2,34.05 376.15,34 375.9,34.2 375.7,34.45 375.5,34.75z"/>
</g>
</g>
</symbol>
</defs>
...
<use xlink:href="#Symbol__202" id="Symbol.__203" width="94.9" height="52.4"
x="0" y="0" transform="matrix(1 0 0 1 813.15 14.5)" overflow="visible"/>
and is the same as a girl
<use xlink:href="#dziewczynka" id="dziewczynka1" width="80.1" height="187.8"
x="-40.05" y="-93.9" transform="matrix(1 0 0 1 50 200)" overflow="visible"/>
I tried to remove the dot from ID in the cloud but it didn't change anything. Why the clouds are not visible in the browser?

Resources