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)" />
Related
I've got an SVG element in my HTML. In that SVG there are 6 paths in various locations. I want to get the nth path with a pure CSS selector, however I cannot figure this out.
I have tried nth-child and nth-of-type, however they don't work in this case, because nth-child(1) will return all paths that are the first child of its parent, which in my case means it returns 3 paths. I want it to basically get all 6 paths, regardless of position in the DOM, and then get the 1st of those 6.
Minified HTML:
<html lang="en">
<body>
<svg>
<defs>
<mask>
<path></path> <-- I want to get this specifically.
<g>
<path></path>
<path></path>
<path></path>
<path></path>
</g>
</mask>
</defs>
<g>
<path></path>
</g>
</svg>
</body>
CSS selector:
path:nth-child(1)
I can't restructure my markup to make the selector work, because this is imported from an SVG file in real-time. Also, I'm thinking you could do this with jQuery, but I'm looking specifically for a pure CSS solution.
Any ideas would be appreciated. Thanks all.
I noticed that the SVG attribute dominant-baseline behaves different in Chrome and Firefox.
The vertical alignment is not exactly the same for dominant-baseline="hanging". In Firefox, the gap between the path and the text is slightly bigger than in Chrome.
In Chrome 76.0.3809.132
In Firefox 69.0.1
I already read dominant-baseline doesn't work in Firefox but it doesn't seem to apply here since the attribute is directly on the <text> element.
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20,20 L180,20" stroke="grey" />
<text dominant-baseline="hanging" x="30" y="20">Hanging</text>
</svg>
Example taken from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline.
I would expect the vertical alignment to be the same across browsers but it's not. Any idea why ?
I ran into this as well.
It seems it was a known bug in FireFox but has been fixed (in v82 Aug-2020 as much as I can see).
So it looks fine in latest FireFox (87.0):
Html code in Stackblitz
I ran into it because some test automation tools (eg. Percy) still using old firefox version.
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'm trying to render svg lines. I can set shape-rendering to crispEdges under chrome, but it doesn't work with IE11. How can I do the same with IE11? Thanks!
Turns out I have to set the attribute of the svg element, not the "style" of it. I was setting it to
<line style="shape-rendering: crispEdges" />. It should be <line shape-rendering="crispEdges"/>
I am examining how to add external SVG files in a responsive manner, and fell for the SVG image tag trick, because it doesn't require JavaScript.
(The SVG has been 'washed' with scour, thus being stripped of height/width attributes, and viewBox being added, as recommended.)
The problem is that this technique seems to require a height and width attribute to work, on the image tag, which isn't responsive. Suggested syntax is:
<svg width="200px" height="100px">
<image xlink:href="logo.svg" src="logo.png" width="200px" height="100px"/>
</svg>
However, setting relative dimensions, like so:
<svg style="width:100%; height:100%">
<image xlink:href="logo.svg" src="logo.png" width="100%" height="100%"/>
</svg>
.. makes the SVG responsive, however renders the <image> element incorrectly (or, not as expected anyway). This can be fixed by adding preserveAspectRatio and viewBox attributes:
<svg style="width:100%; height:100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 100">
<image xlink:href="logo.svg" src="logo.png" width="100%" height="100%"/>
</svg>
Now everything works as expected in all major browsers, except that in IE9-11, the problem now lies with <svg> tag: it's not wrapped around the <image> tag.
Been playing around with various combinations, like omitting the <svg>'s height attribute, but to no avail.
Has anyone solved this without using JavaScript or conditional statements?
Note: Other methods to achieve the same is of course welcome (that is, responsive, external SVG file, working fallback, and without using JavaScript)
Note 2: The described method does not fallback gracefully in Safari on IOS 5 either.
I was working on the same issue today and ran across your question hoping for an answer.
Check out this code for the answer: http://jsfiddle.net/ECTBL/
The trick was having the right attributes in my SVG file i.e.
height="..."
width="..."
viewBox="..."
xml:space="preserve"
When I saved the file from illustrator, it was missing a height and width attributes in the SVG file.
Finally, you'll need the following CSS for it to work:
This is for a bug in webkit
svg { max-height: 100%; }
And of course, this makes the image stretch.
img { width: 100%; }