SVG text textlength not working on Mobile Safari - svg

Noticed my SVG text was looking different on different browsers.
After some testing, found that Mobile Safari isn't respecting textLength set on an svg text element.
<text dy="10" textLength="240" fill="red">
Here is the SVG code.
<svg class="passportStamp stampEffectClass" width="120" height="120" viewBox="0 0 206 206">
<circle cx="103" cy="103" r="100" fill="none" stroke="red" stroke-width="3"></circle>
<circle cx="103" cy="103" r="90" fill="none" stroke="red" stroke-width="3"></circle>
<text x="103" y="70" text-anchor="middle" fill="red" stroke-width="2px" alignment-baseline="middle" font-variant="all-small-caps" font-size="31" font-weight="bold">textLength</text>
<text x="103" y="100" text-anchor="middle" fill="red" alignment-baseline="middle" font-variant="all-small-caps" font-size="45">100</text>
<path id="textCircle" d="M28,103a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" fill="none" stroke="none"></path>
<text dy="10" textLength="240" fill="red">
<textPath xlink:href="#textCircle">textLength Chrome vs iOS</textPath>
</text>
<g fill="red" transform="scale(0.15) translate(550 800)">
<path d="m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47"></path>
</g>
<g fill="red" transform="translate(90,30)">
<path d="M14.128 1.79003C13.1305"></path>
</g>
</svg>
Looking at cross browser fallback options, but haven't found any way to make it work yet.


Found the problem. Safari wants the textlength to be set on the textPath.
Solution, set the textlength on both the text for Chrome, and textPath for Safari.
Was tipped off by this issue on the great github project webcompat, which reported similar issues.
Code:
<svg width="205" height="205" class="stampEffectClass isolate">
<circle cx="103" cy="103" r="100" fill="none" stroke="red" stroke-width="3"></circle>
<circle cx="103" cy="103" r="90" fill="none" stroke="red" stroke-width="3"></circle>
<text x="103" y="70"
text-anchor="middle" fill="red" stroke-width="2px" alignment-baseline="middle" font-variant="all-small-caps"
font-size="45" font-weight="bold">textLength</text>
<text x="103" y="100" text-anchor="middle" fill="red"
alignment-baseline="middle" font-variant="all-small-caps" font-size="45">240</text>
<path id="textCircle" d="M28,103a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" fill="none" stroke="none"></path>
<text dy="10"
textLength="240" fill="red">
<textPath xlink:href="#textCircle" textLength="240">textLength Chrome vs iOS</textPath>
</text>
<g fill="red" transform="scale(0.15) translate(550 800)">
<path d="m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47">
</path>
</g>
<g fill="red" transform="translate(90,30)">
<path
d="M14.128 1.79003C13.1305">
</path>
</g>
</svg>
Image showing fix:

Related

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

Center Text on Rectangle in SVG

I am trying to center some text ("Go") onto a blue rectangle in an SVG image, however the text is only appearing at the top left corner.
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="#8080ff" height="400" width="400" y="0" x="0"/>
<text font-weight="bold" stroke="black" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" stroke-width="0" fill="#000000">Go</text>
</g>
</svg>

I think you are missing x="50%" y="50%" then it will work.
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="#8080ff" height="400" width="400" y="0" x="0"/>
<text font-weight="bold" stroke="black" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" stroke-width="0" fill="#000000">Go</text>
</g>
</svg>

What is the data-value attribute in SVG?

I was looking at this article
And particularly this code,
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" aria-labelledby="title" role="img">
<title id="title">A line chart showing some information</title>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line x1="90" x2="705" y1="370" y2="370"></line>
</g>
<g class="labels x-labels">
<text x="100" y="400">2008</text>
<text x="246" y="400">2009</text>
<text x="392" y="400">2010</text>
<text x="538" y="400">2011</text>
<text x="684" y="400">2012</text>
<text x="400" y="440" class="label-title">Year</text>
</g>
<g class="labels y-labels">
<text x="80" y="15">15</text>
<text x="80" y="131">10</text>
<text x="80" y="248">5</text>
<text x="80" y="373">0</text>
<text x="50" y="200" class="label-title">Price</text>
</g>
<g class="data" data-setname="Our first data set">
<circle cx="90" cy="192" data-value="7.2" r="4"></circle>
<circle cx="240" cy="141" data-value="8.1" r="4"></circle>
<circle cx="388" cy="179" data-value="7.7" r="4"></circle>
<circle cx="531" cy="200" data-value="6.8" r="4"></circle>
<circle cx="677" cy="104" data-value="6.7" r="4"></circle>
</g>
</svg>
And I was wondering what data-value attribute was. When I tried googling for some documentation I only found this page, which said:
The data-* SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the SVGElement interface of the element the attributes belong to, with the SVGElement.dataset property.
And since I'm new at SVG, I wasn't sure what this meant. If someone could elucidate me on what data-value is that would be great!

why the text path are not rendered?

I really got puzzled why these two text are not displayed along the line and path. Could someone point me out?
<svg width="300px" height="300px">
<line id="ok" x1="10" y1="20" x2="100" y2="100" stroke="red" stroke-width=10>
<text>
<textPath stroke="black" xlink:href="#ok">OHHHHSUHDIAU</textPath>
</text>
</line>
<path id="io" d="M10,10 L100,10" stroke="blue" stroke-width=10>
<text>
<textPath stroke="black" xlink:href="#io">io</textPath>
</text>
</path>
</svg>

you can only do a <textPath> on a <path>
placing the <text> inside the <line> or <path> elements were causing them not to be rendered.
here is my best guess at what you're trying to accomplish, I hope this helps
<svg width="300px" height="300px">
<defs>
<path id="io" d="M10,10 L100,10" />
<path id="ok" d="M10,20 L100,100" />
</defs>
<use xlink:href="#io" stroke-width="10" stroke="blue" />
<use xlink:href="#ok" stroke-width="10" stroke="red" />
<text>
<textPath stroke="black" xlink:href="#io">io</textPath>
<textPath stroke="black" xlink:href="#ok">OHHHHSUHDIAU</textPath>
</text>
</svg>

SVG not working within Firefox

We're currently developing our new website and we've decided to use some new SVG features.
On one of our project pages we have a SVG animation that follows the paths and draws the outline then fades into the final finished image. (see images below)
Our current problem is the SVG animation that draws the outlines don't display within Firefox, The final image fades in as planned and we have tested in other browsers such as Chrome, Safari and everything works how we envisioned it.
If anyone could point us in the right direction we'd greatly appreciate it. Thank you.
URL - http://labs.madebyanalogue.co.uk/analogue/work/lucky-voice-app.php
<figure>
<div class="drawings ipad">
<img class="illustration" src="../images/work/lucky-voice-app/lucky-voice-app_01.jpg" alt="App Icon" />
<svg class="line-drawing" id="ipad" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" >
<g>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1283.635,402.858
c143.279,0,259.429,116.15,259.429,259.429s-116.15,259.429-259.429,259.429c-27.602,0-53.474-3.967-78.427-11.951
c-0.422-0.135-1.563-0.615-1.983-0.751c-103.918-33.845-179.019-131.515-179.019-246.727
C1024.206,519.008,1140.356,402.858,1283.635,402.858z"/>
</g>
<g>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1282.706,506.785
c86.061,0,155.826,69.766,155.826,155.826s-69.766,155.826-155.826,155.826c-16.579,0-32.119-2.383-47.107-7.178
c-0.253-0.081-0.939-0.369-1.191-0.451c-62.418-20.329-107.528-78.995-107.528-148.197
C1126.88,576.551,1196.646,506.785,1282.706,506.785z"/>
</g>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.178,921.53l-518.028-0.139V402.91h518.34v468.332
c0,0,0.13,51.667,0.13,51.96C1542.622,923.495,1542.178,921.53,1542.178,921.53z"/>
<path display="none" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1577.545,728.638
c0.599-1.922,1.098-24.892,1.098-28.13c0-3.238,0.339-44.827,0.339-44.827H979.276c0,0-0.247,62.331-0.247,64.659
c0,2.328,0.247,9.552,0.247,9.552l68.194-1h529.676L1577.545,728.638z"/>
<g id="_x31_024_1_">
<g>
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1448.534,362.935h-76.694h-253.605
c-74.395,0-134.703,60.312-134.703,134.705v330.295c0,74.394,60.309,134.705,134.703,134.705h330.299
c74.395,0,134.703-60.312,134.703-134.705V496.64C1583.237,422.247,1522.929,362.935,1448.534,362.935L1448.534,362.935z"/>
</g>
</g>
<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1246.419,844.098v-71.26h-73.208v-74.207h-72.561
V479.5h146.582v72.708h74.399V479.5h144.605v219.131h-71.689h-0.221c0,0-0.019,0.74-0.019,1.245s0.019,1.304,0.019,1.304v70.658
h-72.695v72.26H1246.419z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.49,402.91l-519.979,519.979c0,0-39.178-36.889-39.178-97.555
V490c0,0,1.229-52.125,40.948-88.062c0,0,0.438,0.359,0.531,0.515c0.094,0.156,1.025,0.994,1.025,0.994l518.303,518.303"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1467.281,963.015V363.309h-73.211h-294.337
v597.87l0.238,0.399C1101.867,962.177,1467.281,963.015,1467.281,963.015z"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1320.359,962.015V362.309h-13.681h-58.024v597.87
l-0.952,0.399C1248.083,961.177,1320.359,962.015,1320.359,962.015z"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M984.654,700.014h599.706v-14.681V625.31H983.333
L984.654,700.014z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M984.142,845.448h599.706l-0.488-72.723V478.388H985.49l-0.399,0.238
C984.493,480.522,984.142,845.448,984.142,845.448z"/>
</svg>
</div>
</figure>

Resources