I am actually facing a strange issue with SVG and CSS3 transition property.
I have a simple SVG :
<svg version="1.1" class="world" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 200">
<g id="US East" class="interesting">
<polyline points="(...)"/>
</g>
</svg>
With this Sass/Compass style:
.world {
display: block;
width:250px;
height: 200px;
}
.world .interesting {
fill: #759a41;
#include transition-property(fill);
#include transition-duration(0.3s);
}
.world .interesting:hover {
fill: #aee265;
cursor: pointer;
}
It is working like a charm. Until I had a SVG link <a xlink:href="#">(...)</a>. It suddenly breaks the transition animation, and I can't figure it out why.
In action : a link mess it up! (CodePen)
This guy seems to have a solution, but I can't find the difference with mine: http://f.cl.ly/items/3r2J2B0j470U0I3t2K3p/logo.svg
Any idea?
EDIT: It is Chrome issue on some specific url. Works well in Safari.
I can't say that I have a technical explanation for what's happening here, but after having the same exact problem, doing some extensive researching, and playing with the codepens referenced above, it looks like there is a difference between using "http://" and "https://" in your xlink:href attribute.
This will allow the CSS3 transition to work perfectly:
xlink:href="https://www.w3.org"
This will cause the transition to break:
xlink:href="http://www.w3.org"
Both links will take you to the same website. Very strange, but it worked for me.
Related
I'm having an issue where I have a couple of SVGs that are not showing up in Firefox. They work fine in Chromium and Safari.
HTML
<svg
class="something">
<use xlink:href="sprite.svg#home" />
</svg>
CSS
.something {
width: 2rem;
height: 2rem;
fill: black;
cursor: pointer;
}
Sprite.svg
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="home" viewBox="0 0 32 32">
<path d="M28 17.333v13.333h-8v-8h-8v8h-8v-13.333h-4l16-16 16 16h-4zM26.667 9.457v-6.791h-4v2.791l4 4z"></path>
</symbol>
...
</defs>
</svg>
Upon inspection with developer tools, I can see the path for Chrome:
But not for Firefox:
What I have already tried based on other posts:
Made sure xmlns is declared, as well as width and height
Adding fill inherit to svg use svg (https://stackoverflow.com/a/38124867/2910611)
Made sure there are no commas in the d attribute of path
Playing with fill="currentColor" to see if it was instead a problem of fill
Using href instead of xlink:href
Any idea how to resolve this?
I see from caniuse that Firefox supports use xlink:href.
It seems to be a problem of rendering and not fill as changing the size of the icon isn't causing visible changes.
Found the issue: one of the symbols in the sprites file didn't have a closing tag. For some reason other browsers were still able to display all of them without complaining, but not Firefox.
Since it may happen to others, I'll keep the question posted.
The example in the MDN documentation renders without scroll bars in Chrome 86.0.4240.198 .
<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto">
<text y="20">This text is wider than the SVG, so there should be a scrollbar shown.</text>
</svg>
I have changed the example to overflow="scroll" and it still does not work correctly (i.e. it does not show scroll bars). Is there a work around?
This solution does not answer the question directly but works well as a work around: https://stackoverflow.com/a/11449016/539490
Specifically put the SVG in a div, and let the div handle the overflow.
div {
overflow: scroll;
}
<div>
<svg></svg>
</div>
I'm trying to make an image unveil effect with an SVG mask, where a path with a quite complex geometry is scaled via CSS transforms:
clip-path: url(#aqua-dot-mask);
https://codepen.io/rberneder/pen/pojaNex
I tested the effect in Chrome, Firefox and Safari. The first two browsers are presenting what I want to achieve, but Safari has real troubles and glitches.
It seems Safari still has no full support of the clip-path property, but it should be capable of this particular one.
https://caniuse.com/#search=clip-path
Any ideas?
Thanks #Robert for your help. The solution I came up with is to just put the img tag as image tag into the SVG.
Instead of:
<img src="..." style="clip-path(#mask)" />
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
</svg>
I now have:
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
<image href="..." style="clip-path: url(#mask);" />
</svg>
https://codepen.io/rberneder/pen/xxwYmOj
This works for me.
Could You help me that:
I have svg file:
FILE_SVG
exported from Illustrator. Designated target for me is to add "hover" effect to it (it could be Zomm effect or color changing), but at the end file will be uploaded into company's intranet site which is running on Sharepoint. I've made it with CSS but internal template is cutting whole css part/code.
As i know it's possible to be done with Javascript...
Cany You help Me with that or provide an extewrnal link to start with (for amateurs ofc).
Thanks for any help...
If your internal template is cutting your custom CSS, then it's likely going to cut your custom JavaScript as well. To my knowledge, you cannot embed hover effects into an SVG. But if you have access to the HTML and CSS or JavaScript then start with the following and experiment.
So you need to have three files.
Your SVG
Your HTML
Your CSS
in your SVG, it's going to have some weird code like:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
copy that into your HTML, and add an id to the svg:
<div class="svg-wrapper">
<svg id="mySVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>
</div>
and something like this in your CSS:
#mySVG {
width: 200px;
height: 300px;
}
#mySVG:hover {
width: 250px;
height: 375px;
fill: blue;
}
if you do decide to do JavaScript instead of CSS, it will look something like:
document.getElementById("mySVG").addEventListener("mouseover", function () {
event.target.style.fill="blue";
});
Try this tutorial for using SVG: https://css-tricks.com/using-svg/
Try this tutorial for JavaScript hover events: https://www.w3schools.com/jsref/event_onmouseover.asp
You can achieve hover effects using SVG's built in SMIL animation feature. Sharepoint presumably won't strip that.
<svg>
<circle cx="150" cy="75" r="50" fill="red">
<set attributeName="fill" to="green" begin="mouseover" end="mouseout"/>
</circle>
</svg>
Note that this won't work in IE though. Which might be a problem if you are a big MS workplace :)
Sorry if that might come an opinion-based, but I hope there's a right answer..
Where an inline CSS style should be placed inside an SVG document? In the
example I provide below I have defined two styles and a circle that uses them.
The first style is defined inside defs tag and the second styles is defined right inside the svg tag.
Both styles are successfully displayed on the circle (at least in Chrome they do, didn't check other browsers though).
My question is which way is more standard?
I think keeping styles in defs keeps the whole SVG more tidy. However, one can claim that I should not use defs tag since no one references the style with <use>
Thanks!
<svg height="100" width="100">
<defs id="someDefs">
<style id="style1">
.blue-fill {
fill : blue;
}
</style>
</defs>
<style id="style2">
.red-stroke {
stroke : red;
stroke-width : 12
}
</style>
<circle cx="50" cy="50" r="40" class="blue-fill red-stroke" />
</svg>
It doesn't matter. Neither approach is "more standard". <style> elements are not renderable anyway, so there is no real need to put them in the <defs> section
As commented by Paul LeBeau.
After reading this article about style on MDN, that shows an example of a style simply under the SVG root, I am more convinced it is correct to put <style> there rather than under <defs>.
Also, since <defs> tag is indeed for reusable graphical elements that should be rendered, and <style> is not a renderable element, there's no point keeping it there.
Graphical elements defined in <defs> are not rendered directly and will be rendered only with use. Hence it is always a good practice to use <defs> if the graphical object is defined for later use. It also increases the readability of the code.
More Information