SVG path background - svg
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:
Related
getBBox returns vastly different x and y positions for similar paths
I have an SVG diagram with several paths in it:
For each of the 6 paths present, I call getBBox, to retrieve the X and Y positions (so that I can calculate a midpoint and append some text to the center). Works great.
Except for some nodes, the BBox is huge. Like, as wide as the screen almost. I cannot figure it out. Here is a path giving "normal" BBox values:
<path d="M 300.243 403.205 C 300.243 405.72 299.663 408.102 298.627 410.218 C 306.138 409.212 313.497 406.441 320.057 401.847 L 332.019 418.933 C 304.382 438.283 266.839 435 242.982 411.14 L 257.732 396.396 C 260.945 399.609 264.514 402.29 268.32 404.428 C 268.291 404.025 268.274 403.618 268.274 403.205 C 268.274 394.377 275.431 387.221 284.259 387.221 C 293.088 387.221 300.243 394.377 300.243 403.205 Z" id="midInferior" class="wall-area" fill="#b7eb8f"></path>
BBOX: {x: 242.98199462890625, y: 387.22100830078125, width: 89.03701782226562, height: 44.284881591796875}
And one giving odd values:
<path d="M 1582.498388568 609.217735717 A 122.142 122.142 0 0 1 1532.269773089 688.060868994 L 1511.252785308 658.045499787 A 85.5 85.5 0 0 0 1546.413062883 602.854919191 Z" transform="matrix(0.569203, 0, 0, 0.569203, -537.651855, 25.454704)" id="midInferolateral" class="wall-area" fill="#b7eb8f"></path>
BBOX: {x: 1511.2528076171875, y: 602.8549194335938, width: 71.24560546875, height: 85.2059326171875}
Any ideas?
One has a transform the other doesn't. getBBox ignores transforms.
The easiest solution to include transforms is to call getBoundingClientRect instead.
document.querySelectorAll("path").forEach(e => console.log(e.getBoundingClientRect()));
<svg>
<path d="M 300.243 403.205 C 300.243 405.72 299.663 408.102 298.627 410.218 C 306.138 409.212 313.497 406.441 320.057 401.847 L 332.019 418.933 C 304.382 438.283 266.839 435 242.982 411.14 L 257.732 396.396 C 260.945 399.609 264.514 402.29 268.32 404.428 C 268.291 404.025 268.274 403.618 268.274 403.205 C 268.274 394.377 275.431 387.221 284.259 387.221 C 293.088 387.221 300.243 394.377 300.243 403.205 Z" id="midInferior" class="wall-area" fill="#b7eb8f"></path>
<path d="M 1582.498388568 609.217735717 A 122.142 122.142 0 0 1 1532.269773089 688.060868994 L 1511.252785308 658.045499787 A 85.5 85.5 0 0 0 1546.413062883 602.854919191 Z" transform="matrix(0.569203, 0, 0, 0.569203, -537.651855, 25.454704)" id="midInferolateral" class="wall-area" fill="#b7eb8f"></path>
</svg>
Just to demonstrate how you can position circle slices and text without running any JavaScript. <svg viewBox="0 0 100 100" width="300"> <defs> <circle id="pie" r="40" fill="none" stroke="PaleGreen" stroke-width="10" stroke-dasharray="0 1 58 360" pathLength="360" /> </defs> <g transform="translate(50 50)"> <use href="#pie" transform="rotate(0)" /> <use href="#pie" transform="rotate(60)" /> <use href="#pie" transform="rotate(120)" /> <use href="#pie" transform="rotate(180)" /> <use href="#pie" transform="rotate(240)" /> <use href="#pie" transform="rotate(300)" /> <text text-anchor="middle" dominant-baseline="central" font-size="6"> <textPath href="#pie" startOffset="30">Test 1</textPath> <textPath href="#pie" startOffset="90">Test 2</textPath> <textPath href="#pie" startOffset="150">Test 3</textPath> <textPath href="#pie" startOffset="210">Test 4</textPath> <textPath href="#pie" startOffset="270">Test 5</textPath> <textPath href="#pie" startOffset="330">Test 6</textPath> </text> </g> </svg>
How to include a non-centered svg into another one and make sure it is centered?
I would like to place a svg path (which comes from an external source) at some exact location inside an other svg. For instance, placing a drawing at the center of a rectangle. Here is an example: <svg width="450" height="500" xmlns="http://www.w3.org/2000/svg"> <rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" /> <svg x="50" y="50" width="300" height="350"> <g style="display:inline;fill:#fcef3c;stroke:#000000;stroke-width:3" id="main"> <path d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" /> </g> </svg> </svg> However, the external path I handle has non-centered coordinates, so it does not appear centered on the result: Is there some way to correct this? While some manual process could be done on the external path before doing this, the inclusion of the path into the other svg is done in a script, so I should find a non-manual method to put it to the correct place. Following enxaneta comment, I put the path in a symbol element, which I call from a use element (also added a green rectangle filling the symbol element, in order to see its borders): <svg width="450" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="lionHead" viewBox="0 0 350 400"> <rect x="0" y="0" width="350" height="400" style="fill:green" /> <g style="fill:#fcef3c;stroke:#000000;stroke-width:3" id="main"> <path d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" /> </g> </symbol> <rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" /> <use x="50" y="50" xlink:href="#lionHead" width="350" height="400" /> <!-- --> </svg> However the path still does not center properly: what do I do wrong?
Transform the nested svg in a symbol with a viewBox attribute reflecting the bounding box of the path. Use the symbol with a use element. Since the symbol has a viewBox you can give the use element a position (x,y) and a size (width height) . Observation: it is pointless to give display:inline; to a group <svg width="450" height="500"> <rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" /> <symbol viewBox="88 44 218 179" id="theSymbol"> <g style="fill:#fcef3c;stroke:#000000;stroke-width:3" id="main"> <path id="kk" d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" /> </g> </symbol> <use xlink:href="#theSymbol" x="75" y="125" width="300" height="247"/> </svg>
Is it possible to have more than one or two strokes on an SVG single path?
Is it possible to add more than one or two strokes on a single svg path. Ex. This is my code <svg id="" xmlns="http://www.w3.org/2000/svg" height="576" width="576" style="position: absolute;"> <path d="M 10,10 L 10,20 20,20 20,10 30,10" fill="#ff0000;" stroke="#f000" stroke-width="1px" ></path> </svg> and I want stroke color like as a below image:
One path, one stroke. You may redraw the same path over and over using different settings of stroke-dasharray with different colors, so that three gaps will be followed by one segment in a specifc color. However, the length of such segments would have to coincide with the length of the line segments. If the line segments (from corner to corner) have a differing length within the path, then this would not work. And: the length of the line segments has to match exactly the length of th egaps specified by stroke-dasharray. Edit: For aligning the length, you may explicitly set the path length within the path element using pathLength="100" and combine that with stroke-dasharray="25, 75" and varying value of stroke-dashoffset steping through 0, 25, 50, 75
I have split path and give different colors. <svg id="" xmlns="http://www.w3.org/2000/svg" height="576" width="576" style="position: absolute;"> <path d="M 10,10 L 10,20" fill="#ff0000;" stroke="yellow" stroke-width="1px" ></path> <path d="M 10,20 L 20,20" fill="#ff0000;" stroke="red" stroke-width="1px" ></path> <path d="M 20,20 L 20,10" fill="#ff0000;" stroke="blue" stroke-width="1px" ></path> <path d="M 20,10 L 30,10" fill="#ff0000;" stroke="green" stroke-width="1px" ></path> </svg>
SVG Position text relative to parent <g>
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>
Adding new nodes to an SVG <use> tag
Just playing the defs and use for the first time. What I would like to do is use defs to build a base template and then when I use it customise it by adding some more inner tags. Is this possible, as when I try to do it in Firefox it doesn't render any tags which I place as children to the use tag. e.g: <?xml version="1.0" standalone="no"?> <svg width="10000px" height="5500px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <g id="storyCard"> <rect width="800px" height="500px" fill="#ffff00" /> <path d="M 20 120 L 780 120 M 640 20 L 640 120" stroke-width="6px" stroke="black" fill="none" /> </g> </defs> <!-- White Board --> <path d="M 0 0 L 10000 0 L 10000 550 L 0 5500 z M 2000 0 L 2000 5500" stroke-width="20px" stroke="black" fill="none" /> <use xlink:href="#storyCard" transform="translate(100,100)" /> <use xlink:href="#storyCard" transform="translate(1000,200)" > <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive"> My Dummy Story </text> </use> </svg>
It isn't directly possible with use. The use element can contain description and animation elements, but it doesn't behave like an XBL container. You could use XBL, if you're targeting firefox. To stay within SVG, make a group and use the background: <g transform="translate(1000,200)" > <use xlink:href="#storyCard"/> <text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive"> My Dummy Story </text> </g>