I have a few svg-paths like this:
<svg>
<path d="M5,1L5,2" stroke="black" stroke-width="1" fill="none"></path>
<path d="M5,1L5,2L5,3L5,4L5,5L5,6" stroke="black" stroke-width="1" fill="none"></path>
<path d="M5,1L5,2L5,3" stroke="black" stroke-width="1" fill="none"></path>
</svg>
I don't know their width or height or coordinates or how many there are, I would like to scale them so that they together fill the entire parent container. One solution would be to somehow make the svg-canvas shrink to their size and then scale it all with css. I'm new to svg so I'm not sure what's the best approach.
Related
I want to get the (top, left) coordinate of the text element relative to the svg element, expressed in the same unit/greatness as the y and x attributes of the text element.
I think that the example below is close, but there is a problem. getBoundingClientRect returns different values for top, left as the view port size changes, while of course the y, x attribute values of the text element are always the same. Thus the unit/greatness of top, left and y, x does not match.
I tried setting display: flex on the body to force the svg to not scale, but then it got the size 0 x 0.
const svgRect = document.querySelector("svg").getBoundingClientRect()
const textRect = document.querySelector("text").getBoundingClientRect()
const textBoxPosRelativeToSvgExpressedInSvgCoordinates = {top: textRect.y - svgRect.y, left: textRect.x - svgRect.x}
console.log(textBoxPosRelativeToSvgExpressedInSvgCoordinates)
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
<g id="main">
<line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round"/>
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc"/>
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0"/>
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f"/>
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff"/>
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
</g>
</svg>
</body>
I have an SVG that I am trying to use to clip a div, but the id I give to the <clipPath> tag does not work.
I have tried changing the ID, and have made sure that the SVG does indeed exist in the same file, and the ID is visible.
The svg is like so:
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559">
<defs>
<clipPath id="clipper">
<g id="svgg" stroke="none" fill-rule="evenodd">
<path id="path0" d= .../>
<path id="path1" d= .../>
<path id="path2" d= .../>
<path id="path3" d= .../>
<path id="path4" d= .../>
</g>
</clipPath>
</defs>
</svg>
I added the <defs> and <clipPath> tag so I could use the svg I had as a clipping mask.
The html element being used is:
<div class="logo-bg" style="clipPath: url(#clipper)"></div>
the div does have a width and height.
Within developer tools, the css property of the div I am trying to clip with clip-path: url(#clip-id) shows "could not load the image". Ideally I would be able to clip the div with the SVG.
here's the code I am working with: https://jsfiddle.net/mzLtsqva/6/
I am new to working with SVGs and so would appreciate any help to solve this issue.
Inside the <clipPath> don't wrap the paths in a group element.
In the next example I'm using a clipping path that is not working: #no and one that is working: #yes. In the one that is not working I'm wrapping the elements inside in a <g> element.
svg{border:1px solid;}
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="rect" x ="0" y ="0" height ="150" width ="70" style ="stroke:#000;" transform="translate(90, 50)"/>
<clipPath id="no">
<g>
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</g>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#no)"></image>
</svg>
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="yes">
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#yes)"></image>
</svg>
I was researching a strange behaviour in IE11 and came across this thread with the exact problem, but for IE9:
SVG resizing in IE9
I've got an inline SVG element inside a div, which scales to fit the browser window. When the browser is resized, the SVG image resizes with it, so that all the image is visible, and it keeps the same proportions.*
However, in IE9, the image is much smaller, and doesn't resize. Taking off the viewBox scales the image to the full size, which is too big, and it still doesn't resize.
The problem can be seen in this jsfiddle where the resizing does not work as expected in IE9 nor IE11.
<div id="outer">
<svg viewBox="0 0 700 1000" xmlns=http://www.w3.org/2000/svg>
<g transform="rotate(90, 350, 350)" id="pitch-rotated">
<title>Pitch</title>
<path d="m0,0l1000,0l0,700l-1000,0l0,-700z" stroke-width="5" stroke="#fff" fill="#008800" id="perimiter"/>
<line id="centre-line" y2="700" x2="500" y1="0" x1="500" stroke-width="5" stroke="#ffffff" fill="none"/>
<path id="penalty-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,148.5l165,0l0,403l-165,0l0,-403z"/>
<path id="six-yard-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,258.5l55,0l0,183l-55,0l0,-183z"/>
<path d="m1000,148.5l-165,0l0,403l165,0l0,-403z" stroke-width="5" stroke="#fff" fill="none" id="penalty-box-away"/>
<path d="m1000,258.5l-55,0l0,183l55,0l0,-183z" stroke-width="5" stroke="#fff" fill="none" id="six-yard-box-away"/>
<circle fill="none" stroke="#ffffff" stroke-width="5" cx="500" cy="350" r="95" id="centre-circle"/>
<circle fill="none" stroke="#ffffff" stroke-width="10" cx="500" cy="350" r="1" id="centre-spot"/>
<circle fill="none" stroke="#ffffff" stroke-width="7" cx="110" cy="350" r="1" id="penalty-spot-home"/>
<circle fill="none" stroke="#ffffff" stroke-width="7" cx="890" cy="350" r="1" id="penalty-spot-away"/>
<path d="m165,277.5a91,91 1 0 10,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-home"/>
<path d="m835,277.5a91,91 0 0 00,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-away"/>
<path d="m0,10a7.5,7.5 0 0 010,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-left"/>
<path d="m0,690a7.5,7.5 0 0 110,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-right"/>
<path d="m1000,10a7.5,7.5 0 0 1-10,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-left"/>
<path d="m1000,690a7.5,7.5 0 0 0-10,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-right"/>
</g>
</svg>
So my question is, is there still no non-JS way of solving this, even in IE11?
Encountered similar problems with one of my clients. So, the checklist:-
Is the window.onresize triggering?
Are you able to read the new window.innerHeight and window.innerWidth?
What I did was write a zoom slider for SVG. With window.addEventListener("resize", .....) code (thank you SO), read the new height and width values, calculate the correct Zoom. If .onresize doesn't trigger (happen occassionally on every browsers, out of our control), they can use the slider to fix it.
Sideline: Out of curiosity, this looks like a soccer game simulation?
I found that when the CSS3 Zoom is applied on small SVG icons (9px:9px with zoom: 1.5), the SVG icons could be blurry. Any idea to get a sharp and clean icon in this case? Thanks in advance.
The SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
<g>
<g fill="none" transform="translate(0.5, 0.5)">
<g stroke="#000000" stroke-width="0.5" stroke-linecap="square" >
<line x1="2" y1="4" x2="6" y2="4"/>
<line x1="4" y1="2" x2="4" y2="6"/>
</g>
<g stroke="#909090" stroke-width="1" stroke-linecap="square" >
<rect x="0" y="0" width="8" height="8"/>
</g>
</g>
</g>
</svg>
Got a solution myself. The trick is adding:
shape-rendering="crispEdges"
to the SVG elements.
From Mozilla MDN:
crispEdges
Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
See the difference on jsFilddle.
I've got an inline SVG element inside a div, which scales to fit the browser window. When the browser is resized, the SVG image resizes with it, so that all the image is visible, and it keeps the same proportions.
However, in IE9, the image is much smaller, and doesn't resize. Taking off the viewBox scales the image to the full size, which is too big, and it still doesn't resize.
I've found that by setting the width and height of the containing div will make the image larger, but only with fixed pixels, rather than 100%, which is what I need.
This jsfiddle shows the problem in action (i.e. it's fine in Chrome, and not fine in IE9). Resizing the frame borders should make the image resize.
<div id="outer">
<svg viewBox="0 0 700 1000" xmlns=http://www.w3.org/2000/svg>
<g transform="rotate(90, 350, 350)" id="pitch-rotated">
<title>Pitch</title>
<path d="m0,0l1000,0l0,700l-1000,0l0,-700z" stroke-width="5" stroke="#fff" fill="#008800" id="perimiter"/>
<line id="centre-line" y2="700" x2="500" y1="0" x1="500" stroke-width="5" stroke="#ffffff" fill="none"/>
<path id="penalty-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,148.5l165,0l0,403l-165,0l0,-403z"/>
<path id="six-yard-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,258.5l55,0l0,183l-55,0l0,-183z"/>
<path d="m1000,148.5l-165,0l0,403l165,0l0,-403z" stroke-width="5" stroke="#fff" fill="none" id="penalty-box-away"/>
<path d="m1000,258.5l-55,0l0,183l55,0l0,-183z" stroke-width="5" stroke="#fff" fill="none" id="six-yard-box-away"/>
<circle fill="none" stroke="#ffffff" stroke-width="5" cx="500" cy="350" r="95" id="centre-circle"/>
<circle fill="none" stroke="#ffffff" stroke-width="10" cx="500" cy="350" r="1" id="centre-spot"/>
<circle fill="none" stroke="#ffffff" stroke-width="7" cx="110" cy="350" r="1" id="penalty-spot-home"/>
<circle fill="none" stroke="#ffffff" stroke-width="7" cx="890" cy="350" r="1" id="penalty-spot-away"/>
<path d="m165,277.5a91,91 1 0 10,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-home"/>
<path d="m835,277.5a91,91 0 0 00,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-away"/>
<path d="m0,10a7.5,7.5 0 0 010,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-left"/>
<path d="m0,690a7.5,7.5 0 0 110,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-right"/>
<path d="m1000,10a7.5,7.5 0 0 1-10,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-left"/>
<path d="m1000,690a7.5,7.5 0 0 0-10,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-right"/>
</g>
</svg>
</div>
I haven't tested this in IE yet but if you're looking to use 100% width and height the I assume you either want it to be 'fullscreen' or to fit within a container. Since you also mentioned that it scales correctly when...
setting the width and height of the containing div will make the image larger, but only with fixed pixels
...then you can use JS for this. With jQuery, for example, you can do the following:
$(window).resize(function()
{
$('#outer').css({
width: $(window).width() + 'px',
height: $(window).height() + 'px'
})
});
This is assuming that you want your #outer container to be the width and height of the window when the window is resized.
I know you've said you'd like to avoid setting the width and height, but that's the only way I've managed to get it to work, personally.
Though I did figure out that you only need to set the height, you can leave the width at 100%, so:
var container = this.$('.container'),
width = container.width(),
scale = svg.width / width;
container.height(parseInt(svg.height / scale, 10));
Where svg.width and svg.height are the values I know to be the original width and height of the SVG..