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.
Related
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>
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
I've exported a shapefile from PostGIS to SVG using ST_AsSVG. I chose to use relative coordinates for the export. The result of the export is here:
http://pastebin.com/rmB89Pyw
When I put this into a very simple HTML page with an SVG path element, I don't see any of the path. I"m guessing it's something to do with the viewBox/scaling/transform - but I'm not sure where to start, this is my first foray into this area.
Any ideas?
Here is a way I found to embed your shape:
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width="800"
height="600"
style="border: 1px solid red">
<path
transform="translate(400,300) scale(.01, .01) translate(-323712.401, 4848647.35)"
d="... YOUR PATH ..." />
</svg>
</body>
</html>
What I did is put a "transform" attribute to (from right to left):
translate the first point of you path to 0,0
scale the path (by 0.01), I tried a few scales
translate the 0,0 (you first point) to the middle of the svg image (400, 300)
I think you can adapt this to do exactly what you want (or even make a script to extract the bounding box informations etc).
**CSS**
.testSVG { background: gray; width: 50%; }
.testSVG img { margin: 10px; max-width: 100%; }
**HTML:**
<div class="testSVG">
<img src="http://www.html5rocks.com/static/demos/svgmobile_fundamentals/images/HTML5- logo.svg" alt="html5">
</div>
SVG Scaling example
In Firefox the parent div (in this example .testSVG) scaled both horizontally and vertically with the scaling .svg image.
However in IE9 the parent div scales on horizontally while the .svg is still scaled both horizontally and vertically.
I liked to duplicate what is happening in Firefox in IE as well. Does anyone have any insight?
Thanks,
Z
I had the same issue, and I followed the answer in a similar question:
SVG in img element proportions not respected in ie9
essentially I removed the height and width attributes from the svg tag.
Removing these tags also happened to fix an issue in Safari where extra spacing was getting introduced.
How could one obtain nine-slice scaling in SVG?
Specifically, I'm looking for a way to define SVG objects that behave like nine-sliced objects when resized (some elements maintain their dimension, and others scale with the container).
If you meant to apply it to an svg, then the CSS3 Borders and backgrounds spec should help you do that if you reference an svg.
If you meant you wanted to do it inside an svg file, then you might be able to use a <pattern> (possibly combined with some nested <svg> elements) to do something similar. Nested <svg> elements might be another way to do this, see e.g this example. Alternatively use 9 <use> elements with different transforms, each having a different clip-path applied.
You need something like a margin around the elements that form the edges and the center, to tell them to start X pixels from the left/top to y pixels from the right/bottom. Use a foreignObject, like this:
<foreignObject width="100%" height="100px">
<div xmlns="http://www.w3.org/1999/xhtml" style="margin: 0 100px;">
<svg>
<!-- code here -->
</svg>
</div>
</foreignObject>
I wrote about methods of applying scaling grids to SVG here: http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/
Cheers, Dirk