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>
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.
I want to add multiple lines of text to an svg, which would be contained within the svg (does not overflow). How can I do that?
I knew that the text tag is used in svg, but I discovered that it's single lined. Then, when I give it textLength (so that it would contained in specific svg), its words overlap with each other. How can I put multiple lines of text which would adjust in svg tag? The code I tried is below:
<svg width="200" height="60" style="border: 1px solid black;">
<text x="10" y="30" textLength="180" style="font-size: 30px;">The paragraph here</text>
</svg>
It doesn't work. SVG has no mechanism for breaking lines.
That said, you would be able to encapsulate a html <p> tag as a foreignObject:
<svg xmlns="http://www.w3.org/2000/svg"
width="21cm" height="29.7cm" style="border:1px solid black;">
<foreignObject x="6.4cm" y="3.6cm" width="10cm" height="10cm">
<p xmlns="http://www.w3.org/1999/xhtml"
style="font-size:48px;">The paragraph here</p>
</foreignObject>
</svg>
Please note that the namespace declarations must be given, and you need to write valid XHML for this to work.
In addition, foreignObject is part of the SVG context, so a width and height need to be set, otherwise it will have no inherent size.
I'm making SVG effects by combining 2 identical photos with alternate slits. When you look closely, there are dotted lines 45 degree across the whole images. Referencing this question, I already tried the option shape-rendering="optimizeQuality", shape-rendering="geometricPrecision" and shape-rendering="auto" on <polygon> tags, but the dots still appears.
How do I remove the tiny dots?
Partial HTML codes (full code is too long to post here, see JSFiddle below for full CSS, JS and HTML codes):
<div class="image_wrapper">
<svg id="svg-1" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
<div class="image_wrapper2">
<svg id="svg-2" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
JSFiddle demo is here
The dots are caused by anti-aliasing of the polygons that you are using for the diagonal slit clipping paths.
IMO there isn't any way to prevent that. It may or may not get better if you turn anti-aliasing off with `shape-rendering="optimizeSpeed". And even if that works on one browser, it may not work on other ones.
My suggestion is to just have a complete ("un-slitted") version of the image on top. Make it invisible initially, then show it once the animation has finished.
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.
I am trying to stretch an svg document inside an DOM in order to fit the window size.
like so:
<div id="y">
<div id="button"> click to zoom</div>
<embed id="x" src="s17.svg" >
<script>
var btn= document.getElementById("button");
btn.addEventListener('click',function(){
var z= document.getElementsByTagName("embed")[0];
var y = z.getSVGDocument();
y.lastChild.setAttribute("viewBox","0 0 "+window.innerWidth+" "+window.innerHeight);
},false);
</script>
</div>
css:
#x{
height:100%;
width:100%;
overflow:hidden;
}
#y{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
}
This isn't working... What am I doing wrong?
All browsers should be able to handle this just fine:
add a viewBox to the svg element (s17.svg in your example) without using script if possible
remove the width and height attributes on the svg element if they are specified
add an attribute preserveAspectRatio="none" to the svg element to make it stretch even if the css-viewport aspect ratio doesn't match the viewBox aspect ratio.
set the width/height of the embed/iframe/object to whatever you want and the svg will automatically stretch to fit
If you don't want stretching then you can also do preserveAspectRatio="xMidYMid slice" (fill whole viewport, slicing away parts if necessary) or preserveAspectRatio="xMidYMid meet" (this is the default, center the svg in the viewport and maintain the aspect ratio).
All browsers handle SVG support completely differently. I think your best bet is to use an object tag instead of embed, and you still have to do some hacking to get it to look right on each browser. This link and this link have some useful information for getting it to work cross-browser.