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
Related
I am trying to get the larger version from the thumbnail of a profile picture on Facebook.
Is this still achievable?
I have found an old solution but no longer works: How to get larger version of Facebook's thumbnail images?
When I try to simply change the size in the url (like old times) I get the following:
URL signature mismatch
For instance, this is the inner element I have inspecting the thumbnail:
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="https://scontent.fbri2-1.fna.fbcdn.net/v/t39.30808-1/311117637_10228232448266995_8684249587025903653_n.jpg?stp=cp0_dst-jpg_p60x60&_nc_cat=108&ccb=1-7&_nc_sid=7206a8&_nc_ohc=atKyZ3_RwVoAX8QrTbc&_nc_ht=scontent.fbri2-1.fna&oh=00_AfDr6aLZTybVIlYpRScHNxNi-RzWcNPmGabEnOLvT_wL8Q&oe=63F1CAE0" style="height: 60px; width: 60px;"></image>
However I have no idea how to get the larger size from that link.
If it's not possible, I guess the only way would be to programatically visit each profile and get the link of the larger profile picture.
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
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>.
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
This question already has answers here:
Stretch and scale a CSS image in the background - with CSS only
(22 answers)
Closed 8 years ago.
I am new to web development. What I was trying to do was build an adaptive web site. I decided to use .svg for many of my images. My question is - Is there any way to use .svg as a background image using the css style sheet and keep it adaptive and scale. I wanted to be able to use media queries to keep the mobile portion of the web site smaller with less images. The olny problem is, is that I want my .svg to be able to scale (grow bigger and smaller with the web page). I have found a way to do this as an inline image but that will always require me to load all the images from the start of loading. I don't want the mobile users to have to download all the images because it will slow things down and cost money from there data accounts. I wanted the media queries to pull images in and out of the page via css depending on the screen size of the user. Sorry for the long winded question. Thanks for your time.
PS trying to do this with out using java script if its possible? Are there draw backs to using java script on a web site?
CSS rule
background-image: url('file.svg');
To make your SVG scale you should use percentages for your measurements where possible. For instance if you want to make a gradient that fills the whole background:
file.svg
<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(192,192,192);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
</svg>
You may also want to look into responsive CSS with media queries if this doesn't provide enough control. You can use it to change it to different SVGs. This CSS section targets screens that are 800px wide at most:
#media screen and (max-width: 800px) {
body {
background-image: url('file800.svg');
}
}
Another tool at your disposal is the background-size rule. It's a CSS 3 rule so you might want to look at the level of support for different browsers.