Related
I am working with a SVG element as following. In this I am using <textPath></textPath> to place a text on a path.
The svg is following
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="green" rx="35" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1090" height="500" fill="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<path id="WorldAvg" class="WorldAvg" fill="none" stroke="white" stroke-width="5" opacity="1" d="M0,418.8448266855795L45.416666666666664,414.575606092466L90.83333333333333,411.52106545918446L136.25,407.6362492744353L181.66666666666666,404.77160362539087L227.08333333333334,393.4071256244998L272.5,391.02044947895274L317.9166666666667,386.66829128561017L363.3333333333333,379.8367479839252L408.75,378.1893224105598L454.1666666666667,369.95354728799214L499.5833333333333,368.77725419172447L545,363.8472517451793L590.4166666666666,363.6062134379884L635.8333333333334,357.4943259634553L681.25,351.27652154825586L726.6666666666666,344.34458188257486L772.0833333333334,342.18836536625594L817.5,338.5473949587725L862.9166666666666,336.1670218633692L908.3333333333334,332.6090887556393L953.75,328.1112436453848L999.1666666666666,321.4448005003716L1044.5833333333335,312.9573561957251L1090,306.4131526885112"></path>
<g class="avgLbl">
<text text-anchor="start" stroke="red">
<textPath href="#WorldAvg" startOffset="0%">10.3%</textPath>
</text>
<text text-anchor="end" stroke="red">
<textPath href="#WorldAvg" startOffset="100%">24.7%</textPath>
</text>
</g>
</svg>
</body>
</html>
My end goal is to place each text just above the path so that the text is clearly visible.
To achieve that, I tried the following which did not work. the label for 24.7% is pushed far down.
Is there a way to programatically achieve this?
const element = document.querySelectorAll('.avgLbl>text');
const comp = document.querySelector(`.bound>#WorldAvg`);
element.forEach(
(a, i) => {
const diff = comp.getBoundingClientRect().bottom - a.getBoundingClientRect().bottom;
a.setAttribute('transform', `translate(0,${diff})`)
}
);
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="green" rx="35" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1090" height="500" fill="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<path id="WorldAvg" class="WorldAvg" fill="none" stroke="white" stroke-width="5" opacity="1" d="M0,418.8448266855795L45.416666666666664,414.575606092466L90.83333333333333,411.52106545918446L136.25,407.6362492744353L181.66666666666666,404.77160362539087L227.08333333333334,393.4071256244998L272.5,391.02044947895274L317.9166666666667,386.66829128561017L363.3333333333333,379.8367479839252L408.75,378.1893224105598L454.1666666666667,369.95354728799214L499.5833333333333,368.77725419172447L545,363.8472517451793L590.4166666666666,363.6062134379884L635.8333333333334,357.4943259634553L681.25,351.27652154825586L726.6666666666666,344.34458188257486L772.0833333333334,342.18836536625594L817.5,338.5473949587725L862.9166666666666,336.1670218633692L908.3333333333334,332.6090887556393L953.75,328.1112436453848L999.1666666666666,321.4448005003716L1044.5833333333335,312.9573561957251L1090,306.4131526885112"></path>
<g class="avgLbl">
<text text-anchor="start" stroke="red">
<textPath href="#WorldAvg" startOffset="0%">10.3%</textPath>
</text>
<text text-anchor="end" stroke="red">
<textPath href="#WorldAvg" startOffset="100%">24.7%</textPath>
</text>
</g>
</svg>
</body>
</html>
You could achieve a baseline offset by adjusting dominant-baseline and dy values like so:
svg {
display: block;
height: 100vmin;
}
text {
font-size: 30px
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="green" rx="35" style="overflow: visible;"></rect>
<rect class="boundRect" x="70" y="70" width="1090" height="500" fill="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<path id="WorldAvg" class="WorldAvg" fill="none" stroke="white" stroke-width="5" opacity="1" d="M 0 418.8 L 45.4 414.6 L 90.8 411.5 L 136.3 407.6 L 181.7 404.8 L 227.1 393.4 L 272.5 391 L 317.9 386.7 L 363.3 379.8 L 408.8 378.2 L 454.2 370 L 499.6 368.8 L 545 363.8 L 590.4 363.6 L 635.8 357.5 L 681.3 351.3 L 726.7 344.3 L 772.1 342.2 L 817.5 338.5 L 862.9 336.2 L 908.3 332.6 L 953.8 328.1 L 999.2 321.4 L 1044.6 313 L 1090 306.4"></path>
<g class="avgLbl">
<text text-anchor="start" dominant-baseline="hanging" dy="10" stroke="red">
<textPath href="#WorldAvg" startOffset="0%">10.3%</textPath>
</text>
<text text-anchor="end" dominant-baseline="hanging" dy="10" stroke="red">
<textPath href="#WorldAvg" startOffset="100%">24.7%</textPath>
</text>
</g>
</svg>
dominant-baseline="hanging"
will position your text under your <textPath>
dy="10"
allows you to finetune the vertical alignment further:
Quite often capital letters ascenders will collide with your <textPath>.
I'm pretty new to SVG. I have set of icons created using SVG. I'm trying to use <use> tag to render a particular part of SVG. But everything goes in vain. Not able to figure out what's the mistake i'm doing. Here is the code which i tried and also refer the fiddle. You can see that overall svg is rendered, But trying to render particular part of the SVG failed. Any help will be appreciated
<svg width="303px" height="30px" viewBox="0 0 303 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Pivot" transform="translate(253.232000, 6.247500)">
<path d="M0.833,15.4105 L0.833,11.662 L3.7485,11.662 L3.7485,11.2455 L0.833,11.2455 L0.833,7.9135 L3.7485,7.9135 L3.7485,7.497 L0.833,7.497 L0.833,4.5815 L0,4.5815 L0,16.2435 L0.833,16.2435 L0.833,15.827 L3.7485,15.827 L3.7485,15.4105 L0.833,15.4105 Z M18.8036328,16.2435 L4.5815,16.2435 L4.5815,15.6124537 L8.7465,15.6124537 L8.7465,12.7095463 L4.5815,12.7095463 L4.5815,12.0785 L8.7465,12.0785 L8.7465,8.12804634 L4.5815,8.12804634 L4.5815,7.497 L8.7465,7.497 L8.7465,4.5815 L3.7485,4.5815 L3.7485,4.4408921e-16 L19.5755,4.4408921e-16 L19.5755,4.5815 L17.3516962,4.5815 L14.5775,4.5815 L14.5775,7.497 L18.7425,7.497 L18.7425,4.5815 L19.5755,4.5815 L19.5755,16.2435 L18.8036328,16.2435 Z M18.7425,15.6124537 L14.5775,15.6124537 L14.5775,12.7095463 L18.7425,12.7095463 L18.7425,15.6124537 Z M18.7425,12.0785 L14.5775,12.0785 L14.5775,8.12804634 L18.7425,8.12804634 L18.7425,12.0785 Z M13.7445,4.5815 L9.5795,4.5815 L9.5795,7.497 L13.7445,7.497 L13.7445,4.5815 Z M13.7445,8.12804634 L9.5795,8.12804634 L9.5795,12.0785 L13.7445,12.0785 L13.7445,8.12804634 Z M13.7445,12.7095463 L9.5795,12.7095463 L9.5795,15.6124537 L13.7445,15.6124537 L13.7445,12.7095463 Z M3.7485,4.5815 L4.5815,4.5815 L4.5815,16.2435 L3.7485,16.2435 L3.7485,4.5815 Z M0,3.7485 L3.7485,3.7485 L3.7485,4.165 L0,4.165 L0,3.7485 Z" id="Combined-Shape" fill="#AAAAAA"></path>
<rect id="Rectangle-324" fill="#FAC10C" x="0" y="3.7485" width="4.5815" height="12.495"></rect>
<rect id="Rectangle-324-Copy" fill="#FAC10C" transform="translate(11.733102, 2.290750) rotate(90.000000) translate(-11.733102, -2.290750) " x="9.44235203" y="-5.73533321" width="4.5815" height="16.0521664"></rect>
</g>
<g id="Filter" transform="translate(232.407000, 6.247500)">
<rect id="Rectangle-108" fill="#3BA3F8" x="4.73505679e-14" y="0" width="12.9115" height="1.2495"></rect>
<rect id="Rectangle-109" fill="#3BA3F8" x="4.73505679e-14" y="2.499" width="12.9115" height="1.2495"></rect>
<path d="M6.33160096,10.829 L6.45575,10.9678333 L6.57989904,10.829 L6.33160096,10.829 Z M4.8418125,9.163 L4.73505679e-14,3.7485 L12.9115,3.7485 L8.0696875,9.163 L4.8418125,9.163 Z" id="Combined-Shape" fill="#8EC9FB"></path>
<path d="M4.5815,9.163 L7.9135,9.163 L7.9135,18.326 L4.74601819,14.5516554 L4.5815,9.163 Z" id="Rectangle-111" fill="#8EC9FB"></path>
</g>
<g id="Sort" transform="translate(206.167500, 1.666000)">
<rect id="Rectangle-120" fill="#E2A364" x="10.829" y="4.165" width="2.0825" height="17.9095"></rect>
<path d="M15.5828281,14.5775 L17.1391718,15.7502891 L12.3853437,22.0588321 L10.829,20.886043 L15.5828281,14.5775 Z" id="Rectangle-121" fill="#E2A364"></path>
<text id="A" font-family="SFUIDisplay-Semibold, SF UI Display" font-size="11.902719" font-weight="500" letter-spacing="-0.107586779" fill="#19AF5C">
<tspan x="0.4165" y="11">A</tspan>
</text>
<text id="Z" font-family="SFUIDisplay-Semibold, SF UI Display" font-size="11.902719" font-weight="500" letter-spacing="-0.107586779" fill="#19AF5C">
<tspan x="0.4165" y="22.662">Z</tspan>
</text>
</g>
</svg>
<svg>
<use xlink:href="Pivot"></use>
</svg>
You want to know why the "Pivot" element is not showing up in your second SVG? Is that right?
The reason is because you are not referencing it correctly. You should have written:
<svg>
<use xlink:href="#Pivot"></use>
</svg>
Note the missing hash ("#") symbol.
I have the following - I've been tinkering around with it for a while, but I can't seem to get the path to appear in Firefox. Does anyone have any clue why? The circles show up. Firefox code inspector also gives it a size of 0x0.
<g transform="translate(85 460)" class="avatar">
<circle cy="0" cx="0" r="6" class="base"></circle>
<path transform="translate(0, 0) rotate(0) scale(1)" fill="black" d="M 0,0, L 0,8, L 10,0 Z"></path>
<circle cy="0" cx="0" r="3" class="dot"></circle>
</g>
Any help would be very much appreciated.
EDIT:
Full svg:
<svg style="border: 1px solid black;" height="500" width="500">
<image height="500" width="500" y="0" x="0" xlink:href="image.jpg"></image>
<path style="opacity: 1;" d="M85,460Q81,150,85,110C91,49.99999999999999,113,60,125,60S162.75,77,165,110S131,250,140,280S204,305.5,225,310S268.75,322,280,310S291,254,300,230S328,150,340,150S371,209,380,230S394.75,278,400,290S410.5,307,415,310S424,310,430,310S449.75,307,455,310S463.5,324,465,330S465,338.75,465,350Q465,357.5,465,405" class="path selected"></path>
<path d="M110,395L380,395" class="path"></path>
<g transform="translate(85 460)" class="avatar">
<circle cy="0" cx="0" r="6" class="base"></circle>
<path transform="rotate(0) scale(1)" fill="black" d="M 0,0, L 0,8, L 10,0 Z"></path>
</g>
</svg>
Per the SVG specification if a comma occurs in a path it must have a number on either side of it.
Your path is invalid and Firefox rendering of the path is correct. I don't know if there is a Chrome bug on its invalid rendering of this path bug if there isn't you could create one.
To get your path to work in FF, remove the stray commas:
<path transform="rotate(0) scale(1)" fill="black" d="M 0,0 L 0,8 L 10,0 Z"></path>
Any ideas when Firefox is likely to implement lengthAdjust andtextLength?..... i am working svg application. lengthAdjust and textLength working fine in chrome but not working in fire fox .
<svg viewBox = "0 0 500 300" version = "1.1">
<defs>
<path id="s3" d="M 10,90 Q 100,15 200,70" />
</defs>
<g>
<text font-size = "20">
<textPath xlink:href="#s3" textLength="205">
Short text</textPath>
</text>
<use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
</g>
</svg>
This is implemented in Firefox but only for text elements (not for textPath or tspan) in this case that's OK though as you can just move the attribute to the text element.
<svg viewBox = "0 0 500 300" version = "1.1">
<defs>
<path id="s3" d="M 10,90 Q 100,15 200,70" />
</defs>
<g>
<text font-size = "20" textLength="205">
<textPath xlink:href="#s3">
Short text</textPath>
</text>
<use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
</g>
</svg>
There is a bug for textPath/tspan support open should you wish to contribute to extend it.
I search everywhere and I didn't understand/found how to do what I want.
I Have 2 svg files who represent somes UML diagrams generated by Visual Paradigm for UML, they have similar objects. For exemple 'FileSource.svg' and 'FileDestination.svg', both of them have an object 'A' who is on differents positions for each.
I would like that when you click on 'A' in 'FileSource.svg' that return 'A' in 'FileDestination.svg' with an hightlight on 'A' to see where it's in the diagram 'FileDestination.svg.
Here is the jsfiddle : http://jsfiddle.net/jim987/rJk54/
But I don't find how to create 2 files with jsfiddle, so the linking part don't work..
First I tried to link the similar objects, there is the code for one object in diagram :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="0" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" stroke="rgb(0,0,0)" text-rendering="auto" stroke-linecap="square" width="1267" stroke-miterlimit="10" stroke-opacity="0" shape-rendering="auto" fill="rgb(0,0,0)" stroke-dasharray="none" font-weight="normal" stroke-width="1" height="626" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
<defs id="genericDefs"/>
<g>
<defs id="defs1">
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath7">
<path d="M-7 -7 L101 -7 L101 51 L-7 51 L-7 -7 Z"/>
</clipPath>
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath10">
<path d="M0 0 L90 0 L90 15 L0 15 L0 0 Z"/>
</clipPath>
</defs>
<g font-size="11" transform="translate(1173,2)" fill-opacity="1" fill="rgb(255,192,255)" text-rendering="geometricPrecision" font-family="sans-serif" stroke="rgb(255,192,255)" font-weight="bold" stroke-opacity="1">
<a xlink:href="FileDestination.svg#A_Object_FileDestination" xlink:title="object definition">
<rect x="0" width="90" height="40" y="0" clip-path="url(#clipPath7)" stroke="none"/>
</a>
</g>
<g font-size="11" stroke-linecap="butt" transform="translate(1173,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke-linejoin="round" stroke="black" font-weight="bold" stroke-opacity="1" stroke-miterlimit="0">
<rect fill="none" x="0" width="90" height="40" y="0" clip-path="url(#clipPath7)"/>
</g>
<g font-size="11" transform="translate(1173,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke="black" font-weight="bold" stroke-opacity="1">
<a xlink:title="object def">
<text x="21" xml:space="preserve" y="12" clip-path="url(#clipPath10)" stroke="none">Object A</text>
</a>
<line y2="12" fill="none" x1="21" clip-path="url(#clipPath10)" x2="66" y1="12"/>
</g>
</g>
</svg>
Object A in FileDestination.svg :
<g font-size="11" transform="translate(712,44)" fill-opacity="1" fill="rgb(255,192,255)" text-rendering="geometricPrecision" font-family="sans-serif" stroke="rgb(255,192,255)" font-weight="bold" stroke-opacity="1">
<rect id="A_Object_FileDestination" x="0" width="90" height="40" y="0" clip-path="url(#clipPath13)" stroke="none"/>
</g>
The problem is : when I creates this link my rectangle color become black.. do you know why ?
Also is it possible to link my object with the transform defined ? (I saw it in the doc)
like this :
FileDestination.svg#svgView(transform(translate(712,44)))
Because I added the id for each rectangle, when svg files are generate there isn't any ids, just the transforms.
The translate corresponding at the transform of A in FileDestination, but when I tried it, I just have a blank before my diagram..
And Finally, I have no idea, how to do my animation to target the destination of the link. Certainly in JavaScript or with d3.js ? with actionListener ? but how ? because objects are not in the same page. And I do not how to handle the fact that the objects aren't in the same page.
Thanks by advance for yours answers :))