Consider the following code
<div style="width:480px;border:1px solid red">
<svg viewBox="0 0 100 100">
<path style="stroke:#000" d="M 0 0 100 100" />
</svg>
</div>
As we can see, the line is fully stretched to container. This is expected as per my understanding on viewBox. (in Firefox/Chrome/Edge/Opera)
However, IE11 or below does not strech the line to container. This is because IE11 expect a specific height to SVG.
I do not really care about IE11 support. I am just wondering, whether all modern browsers are consistent in handling svg aspect ratio in the same way firefox/chrome/edge/opera handles it as I showed in first code snippet.
Note: I am not looking for a working around in IE, that is already available in many stackoverlow answers. I just wanted to ensure that, not setting explicit height for my svg does not cause issues in modern browsers
Related
I am experiencing frustrating behavior with zooming out my browser. As you can see in this image:
The editor is supposed to be up next to the scheduler. I transition the editor from a width of 0px to 433px, and transition the scheduler from a width of the viewport, to scheduler-width - 453px, giving a 20px buffer, yet this is still colliding at 75%.... I don't get how? Reducing the scheduler width by 453 and increasing the editor from 0 to 433 should always ensure a 20px buffer between them, but this is not happening when zoomed out... Event if pixel size/count is a bit screwed up due to the zooming, it should still behave correctly as I am telling the scheduler to move over 453px (however they are now defined) to let the scheduler take up 433 of those free pixels.
Is this just odd behavior with zooming in/out of the browser?
You could try to use other units, like percents and em, instead of pixels. It should not only solve your issue, but also make your code run better on different-sized displays. Sorry if this is a bit irrelevent.
I'm trying to position a svg rectangle with transfrom=translate().
When I tested it, I saw that it doesn't work in Chrome but works nice in Firefox.
I also tried in Chrome with -webkit- but doesn't work either.
In the code snippet you can see whats the problem when its open with Chrome.
Does anyone now a workaround for this or am I doing something wrong?
<svg transform="translate(100,0)">
<rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>
<br><br>
<svg style="transform:translate(100px,0)">
<rect width="200" height="200" style="fill:blue;;stroke:black" />
</svg>
https://jsfiddle.net/suf2reee/
I think this is a SVG 1.1 vs SVG 2 issue. In SVG 1.1, which is the version that browsers generally support, the transform attribute was not valid for the <svg> element. It is allowed in SVG 2.
Firefox have started implementing some SVG 2 features, whereas Chrome is not so far along.
The simplest solution is just to put your transform on the <rect>.
Before I give up and build my solution completely in SVG, I thought I would throw this out to the StackOverflow crowd to see if I missed anything.
In a current project, I have a .png that represents the faceplate of a real-world water irrigation controller. The SVG acts an overlay and contains the coordinates of all the pressable buttons and virtual LEDs that blink when necessary on the real world device, interacting with a Node application that is talking to the 'real' water controller, and the .png is an embedded background image. (see code below) We programmatically (via Javascript) change the overlay SVG and the faceplate image on entry into the page, depending on earlier user input.
Everything works great, we can press buttons on the SVG overlay and the real world controller responds, and vice-versa.
The problem comes down to scaling the embedded image. Under Chrome, Firefox, and Opera, I can resize the browser window to various sizes and the SVG and embedded image scale beautifully.
But IE 11+ refuses to play ball, and stubbornly keeps the embedded image at a reduced size.
I think I've googled-to-death everything on the subject of scaling SVGs in IE, and tried various CSS hacks and DOM manipulations, although most seem to apply to embedding the SVG in an HTML img tag, and not an SVG with an embedded image tag.
I've tried removing all width/height from the SVG and use CSS-only; I've tried using 100% width/height in the image tag to (supposedly) allow the viewBox to control it's dimensions; I've tried fixing the width/height to same values of viewBox; I've tried using preseveAspectRatio in both the SVG header and the image. I'm running out of ideas.
Relevant code sample:
<svg class="scaling-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 970 530" preserveAspectRatio="xMidYMid meet" >
<image id="faceplate" xlink:href="../images/TWC-front.jpg" class="svg-content" height="530" width="970" preserveAspectRatio="xMidYMid meet"></image>
<g>
<rect id="rect_textDisplay" x="322" y="157" width="530" height="52" opacity="0" />
<text fill="black" x="326" y="176" id="displine1" xml:space="preserve">Welcome to the Virtual Controller</text>
<text fill="black" x="326" y="198" id="displine2" xml:space="preserve"> ... waiting for connection</text>
</g>
<rect id="dial_irroff" x="39" y="319" opacity="0" width="75" height="25" />
<rect id="dial_manual" x="63" y="287" opacity="0" width="80" height="25" />
<rect id="dial_auto" x="148" y="278" opacity="0" width="50" height="25" />
...
Any ideas or prodding in a direction I might not have considered are greatly appreciated. I would like to keep the solution in the current form as much as possible, because we dynamically change the faceplate depending on user input, and there are about 15 different faceplates to be used between two SVG overlays. It would take quite a bit more time to re-build each faceplate in pure SVG. But I am prepared to do it, if necessary. :(
User llobet's comment above of adding 100% height to the html, body and svg elements seemed to do the trick. Initially I took what worked in the codepen that user Mardoxx asked for and applied it to my CSS and it still did not work. After a few minutes of pruning out all but the most basic of CSS rules and discovered a couple of height: auto;, attributes and removed them or made them 100%, then IE11 started playing nice and scaling as expected. It pays to weed out and scruntinize your CSS until things behave as expected. Thanks to both of you for pushing in the right direction.
Relevant codepen.io: http://codepen.io/digitalmouse/pen/LygOWe
I want draw a diagram on a web page . I am planning to use SVG.
I need to draw the diagram in full screen. So I am using the availHeight and availWidth to find the height and width of the client screen and plan to scale it accordingly .
Now my screen is 1920 *1080 resolution.
For testing I drew a line as follows
<svg height="500" width="1920">
<line x1="0" y1="50" x2="1900" y2="50" style="stroke:rgb(255,0,0);" />
</svg>
My problem is in chrome the line overflows the screen and showing a scrollbar
but in firefox it is showing correctly with in the screen
I need a consistent output on both browsers .
Please help me
Why u are not makeing it responsive as an SVG? I would make a container div and make the svg responsive.
Here is a good description:
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php
My situation is pretty simple. If you draw a small ellipse, with a really large stroke width then the browser renders the ellipse with a weird 'cat eye' effect.
I have a jsfiddle here: http://jsfiddle.net/MyBsC/4/
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="80" cy="80" rx="8" ry="10" style="fill:yellow;stroke:purple;stroke-width:50"/>
</svg>
If you play around with the fiddle and make the ellipse larger, the effect goes away. It happens both with SVG ellipses and with ellipses drawn inside a canvas.
I have observed this behaviour on Firefox 21.0, Chrome 26, and Safari 5.1.7 on Mac OSX Lion
Does anyone know why this happens? Is this a bug with the browsers? Or is there a CSS property I am missing?