I'm trying to solve an issue with an SVG text which should be animated on a path.
What I'm trying to accomplish is shown on https://readymade-tv.vercel.app/ (has to be opened in Firefox)
Code for this SVG is available here: https://gist.github.com/vojtechjurasek/1a63f05aaa4f300c31ac2dc677916678
The problem
I'm not able to make it work in any other browser than Firefox. In Safari (macOS) the text is on top of itself. In Chrome there is no text at all.
And in Firefox there is small issue with "dropping" a last letter during the animation - you can see that in top left corner of the path.
Thank you for your help!
For some reason using a rectangle doesn't seem to work in other browsers.
You can get it running by replacing the rect with an identical looking path though.
You also need to set the textLength of the textPath to automatic, else the letters overlap in Chrome etc.
Based on your code, this worked for me. Though the performance in Chrome seems to be bad:
<svg
xmlns="http://www.w3.org/2000/svg"
width="1920"
height="1080"
viewBox="0 0 1920 1080"
>
<path d="M180,40 1740,40S1860,40 1860,160L1860,920S1860,1040 1740,1040L180,1040S60,1040 60,920L60,160S60,40 180,40Z"
id="runpath" stroke="black" fill="transparent"/>
<text textAnchor="right" fill="black" style="font-size: 20px">
<textPath
href="#runpath"
side="left"
textAnchor="right"
spacing="auto"
startOffset="100%"
textLength="auto"
>
<animate
attributeName="startOffset"
from="-2.3%"
to="0%"
begin="0s"
dur="2.35s"
repeatCount="indefinite"
></animate>
ADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADEREADYMADE
</textPath>
</text>
</svg>
I have some SVG icons I'm using which show up correctly in Firefox and Safari, like this:
...but they come out clipped at the edges like this in Chrome (both MacOS and Windows):
The source images are square (they have square viewBoxes, even if there's extra internal blank space), and my SVG markup treats them as square:
<image id="download" href="assets/download.svg" x="161.5" y="0.5" width="2.5" height="2.5"/>
<text id="low-battery-text" x="169" y="2.75" text-anchor="end"></text>
<image id="low-battery" href="assets/low-battery.svg" x="169.5" y="0.5" width="2.5" height="2.5"/>
If I make the specified height of these icons a bit taller then Chrome stops clipping them, but that changes the positioning and scaling of the images a bit too. And besides, it shouldn't be necessary.
I get the impression that Chrome is ignoring the viewBox values for the SVG images, it's finding the internal edges of the images, and scaling according to that (but that's just a guess). (No, that's not it.)
Here's what the SVG inside one of the SVG files looks like:
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<g>
<path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
v-8.861H25.462z"/>
<path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
C15.092,18.979,14.62,18.426,14.62,18.426z"/>
</g>
</svg>
I can only find very different topics discussed when I try to Google for an answer to this problem, so I hoping someone who may have encountered a similar issue might have a suggestion for fixing it.
Update:
Interesting experiment - it isn't a good solution, but it's perhaps revealing of the underlying problem.
If I bypass using an SVG image file, and paste the content of the SVG file into my own SVG, the clipping problem goes away:
<svg viewBox="0 0 30 30" x="161.5" y="0.5" width="2.5" height="2.5">
<g>
<path fill="#0F0" d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
v-8.861H25.462z"/>
<path fill="#0F0" d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
C15.092,18.979,14.62,18.426,14.62,18.426z"/>
</g>
</svg>
For some reason element
<svg width="1000" height="500" transform="rotate(180)">...</svg>
is shown as not rotated in Safari 11.
Chrome 63 renders it properly.
What's the problem?
Thanks!
In SVG 1.1 <svg> elements did not support transform attributes. In SVG 2 it is proposed that they should.
Chrome and Firefox implement this part of the SVG 2 specification, Safari does not yet do so and IE11 never will.
You can achieve the same result in browsers that do not support this SVG 2 feature either by replacing the <svg> element by a <g> element or by creating an <g> child element on the <svg> element and putting the transform on the <g> element.
Browsers allow you to use CSS on the SVG-elements, so an easy fix is to use the CSS transform instead.
<!-- ( works on all elements ) -->
<path style="transform:rotate(180deg)" />
I'm currently using clip-path on the image below. I stupidly didn't look at the browser support and found that it does not work in Edge or IE 11.
I'm wondering how or if possible I could create the below effect with just an SVG that will be supported in IE 11 and Edge.
I currently have been playing around with the below code but strugglign to understand how I can put a image over it like the image above.
<svg>
<path d="M0,60 L50,0 L420,0 A56,56 0 20,1 470,60z" fill="red" />
<a xlink:href="#">
<text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text>
</a>
</svg>
Really looking forward to your ideas.
Here is a rough idea (sorry for rough code as made it in a hurry) using pseudo elements ::before & ::after along with css3 transform and transition properties to achieve somewhat the result you are looking for. You can check it out and work around it if it helps. I checked it in FF and IE edge and 11 and 10 and it works well overall.
https://codepen.io/Nasir_T/pen/EvEMMG
Hope this helps gives your the idea or a work around the issue.
I have created SVG code from coreldraw and want to place it inline in my HTML5 document and have a couple of queries.
How universal is SVG now-a-days? Any suggestions on backwards compatibility?
I have taken out the style data from the svg and put that into my css, I guess that's not a problem - or is it? I also added a hover rule...
.Borderline {stroke:#0099FF;stroke-width:7.45541;stroke-linejoin:round}
.BorderFill1 {fill:#71C6FF}
.BorderFill2 {fill:#CBEAFF}
.BorderFill1:hover {fill: green; }
Can I remove any of the following data that is not needed. (but I want it to work and look the same)
<svg xmlns="http://www.w3.org/2000/svg" class="myimgleft" xml:space="preserve" width="100px" height="105px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 92 97" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="BorderFill1 Borderline" d="M55 51c10,0 18,0 24,0 4,-5 9,-10 9,-15 0,-6 0,-22 0,-32l-16 14c-5,-4 -8,-6 -17,-14l0 47z"/>
<path class="BorderFill2 Borderline" d="M79 51c-5,-1 -41,0 -47,0l0 -14c-8,8 -25,25 -28,28l28 28 0 -13c7,0 11,1 17,-2 6,-2 23,-21 30,-27z"/>
</g>
</svg>
Any other hints / tips that might be useful are very welcome.
1 MDN keeps an accurate list of compatibility per-element. Here's the list for SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
2 Keep the style in your SVG - it'll make it easier to swap out for other SVG images later. You want to be able to quickly update your svg. This one is more a matter of preference.
3 I wouldn't get in the habit of tweaking vector-art exported from CorelDraw by hand. You may think to run it through a minifier, but hand-tuning is almost certainly more work than it's worth.
Here's the first minifier Google gives me:
http://petercollingridge.appspot.com/svg-optimiser
For cases where you're not inlining, you can give .svgz (compressed svg) a shot, which will make it significantly smaller: https://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics
4 Hmm, other tips - well good on you for using vector art on your site. Too many web devs/designers take the shortcut of doing everything in raster. While that gets you a nice looking image for a demo, in the long run it's really hurting your site. With ubiquitous tablets + phones, pinch + zoom is everywhere and your images need to scale nicely.
Personally, I've never loved the idea of inlining svg - I've always preferred saving as .svg and src-ing it like an image. I see why you are inlining it, though, as you're using some hovers.