I have this simple HTML:
<html>
<body>
<embed src="test.svg" type="image/svg+xml" style="border:3px solid green;width:200px;height:200px;overflow:scroll;">
</body>
</html>
And a simple SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:3px solid red;width:500px;height:500px;overflow:auto;">
<circle cx="50" cy="250" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>
The output from browsers:
[1,1] Edge: OK
[2,1] IE11: OK
[1,2] Chrome55: Not scrollable
[2,2] Firefox50: Scrollable at a negligible degree
How to ensure Firefox and Chrome able to have scrollable <embed> with overflow-ed SVG content, as in Edge and IE?
Thank you.
just put a div around the embed und use that as scrolling area...
<html>
<body>
<div style="border:3px solid green;width:100px;height:100px;overflow:scroll;">
<embed src="https://upload.wikimedia.org/wikipedia/commons/e/e9/SVG-Grundelemente.svg" type="image/svg+xml">
</div>
</body>
</html>
to match the behaviour of MS browsers, you have to extend your viewBox to contain all elements you want to be able to scroll to...
given the appropiate width and height should do want you want then...
You can as well roll your own zoom and pan solution using svgDocuments currentTranslate and currentScale properties... I would be curious how currentTranslate behaves for this weird MS behaviour...
Related
The following code displays SVG text with dashed outline of the the width 2px. I want to make its left outline of green colour by adding a css class. Similarly for other sides want to change colour of outline using css class instead of standard Black colour. I tried giving border but was not getting reflected. Please guide how to do.
<!DOCTYPE html>
<html>
<body>
<style>
#abc { outline:dashed; outline-width:2px;}
</style>
<svg height="100" width="200">
<text x="10" y="25" fill="red" id="abc">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
please see this code.
<!DOCTYPE html>
<html>
<body>
<style>
#abc { outline:dashed; outline-width:2px; outline-color:green}
</style>
<svg height="100" width="200">
<text x="10" y="25" fill="red" id="abc">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
I've created an svg for use as a clip-path on an image, and it appears perfect in Firefox, however it doesn't work in Chrome, and I'm wondering what the problem is.
Chrome should support an inline svg clip-path according to this.
And full support according to MDN.
<style>
img {
width: 40%;
height: auto;
display: inline;
}
.clip {
-webkit-clip-path: url('#clip');
clip-path: url('#clip');
}
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">
<img src="https://i.imgur.com/nnHdzO6l.jpg" >
<svg version="1.1"
baseProfile="full"
height="400" width="400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip"
clipPathUnits="objectBoundingBox"
transform="scale(0.0025, 0.0025)">
<!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
<circle cx="50%" cy="50%" r="50%" />
<rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
</clipPath>
</defs>
</svg>
External SVG files are not supported by Chrome at the moment.
You can check this here:
https://caniuse.com/#search=CSS%20clip
Here is what they say about the Partial support for Chrome:
Partial support refers to supporting shapes and the url(#foo) syntax
for inline SVG, but not shapes in external SVGs.
I'm having trouble finding a good work-around for a bug in Firefox. The bug happens when doing a transform scale on a line in SVG.
I'd like to be able to specify changing the length of a line in a transform so I can animate the transition of the transform using css. In Firefox, doing a Transform Scale causes the line to shift. I've tried playing with the transform-origin property to see if I could recenter it, but haven't found any values that worked.
Here is the html code that renders the problem. Works in Safari and Chrome, not in Firefox:
<!DOCTYPE html>
<html>
<head>
<title>Firefox Bug</title>
<meta charset="utf-8" />
</head>
<body>
<svg width="600" height="600" style="border: solid blue 1px;" viewBox="290 290 20 20">
<g style="transform: translate(300px, 300px)">
<path d="M -1 0 L 1 0" stroke="blue" stroke-width="1" style="transform: scale(1, 1);"/>
<path d="M -1 0 L 1 0" stroke="red" stroke-width="1" />
</g>
</svg>
</body>
</html>
Here is what the issue looks like in Safari/Chrome:
Here is what it looks like in Firefox:
The red line segment should completely cover the blue, but in Firefox, the blue segment gets shifted to the side. Already filed the bug in bugzilla. Would love it if anyone had a good workaround for this, that let's me use the scale property without shifting the lines.
This is a little hard to explain, so here's a jsFiddle to show what I mean.
<style>
.clip {
clip-path: url(#clippath);
-o-clip-path: url(#clippath);
-moz-clip-path: url(#clippath);
-webkit-clip-path: url(#clippath);
}
</style>
<div id="container">
<svg>
<defs>
<clippath id="clippath">
<rect x="0" y="0" width="50" height="320" />
</clippath>
</defs>
</svg>
<div id="d1">Bottom</div>
<div id="d2" class="clip">Middle</div>
<div id="d3">Top</div>
</div>
The problem is that I want to apply a clip-path to an absolutely positioned element, however I am finding that all other absolutely positioned elements which appear after it in the DOM will be clipped too. This isn't the case with relatively positioned elements, oddly.
How can I make sure that only the desired element is clipped? I can't see anything wrong with my code. Is this a bug?
This now behaves correctly in all browsers I've tested aside from Internet Explorer (which lacks support for clippath on HTML elements entirely), and as such it's no longer a problem.
Is there a way in SVG to draw a line that keeps thin when the image is stretched?
I'm using a SVG image as a CSS background, something like this:
<svg ... preserveAspectRatio="none" viewBox="0 0 15 15">
<line x1="0" y1="15" x2="15" y2="0"
color="#000" stroke="#333" stroke-width="1" />
</svg>
(A diagonal line). I'm stretching this image through a rectangular element, and when the element is bigger, the line gets thicker, but I need an always-thin line.
Possible? Something like "thin" lines in flash.
In browsers that implement SVG 1.2T you can have a non-scaling stroke Opera and Webkit support this as does Firefox from version 15.
<!-- via property -->
<line … vector-effect="non-scaling-stroke" />
<!-- via CSS -->
<style>
line { vector-effect:non-scaling-stroke }
</style>
<line … />