Alter dynamically-generated SVG to make it responsive? - javascript

I'm trying to use an SVG library like Two.js or SVG.js and alter (on-the-fly) their dynamically generated SVG elements in order to make them responsive. I have a basic example here, showing how a predefined, inline SVG can be responsive.
It involves wrapping the SVG element in a container, assigning some CSS values, adding viewBox and preserveAspectRatio attributes. This appears to be the common way to do responsive SVG elements:
http://jsfiddle.net/N4PK4/
<div class='container'>
<div class='svg-container'>
<svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
<circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="1" />
</svg>
</div>
</div>
.svg-container {
display: inline-block;
position: relative;
width: 100%;
outline: 1px solid red;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.container {
max-width: 400px;
}
However, when I dynamically generate an SVG element with Two.js, and then I try to use jQuery to edit the DOM and make the SVG element responsive (similar to the above example), the SVG element is no longer visible:
http://jsfiddle.net/g5WZj/5/
You can see that I have two SVGs in that example. The first one is the one that doesn't show up. The second, is the inline, static SVG markup that I copied from what was generated in the first example. So obviously, it is not the markup that is the problem.
Also, here is a similar example using svg.js. Same result:
http://jsfiddle.net/3Luaw/5/
So basically, the problem lies in the fact that if you create a static SVG element in your HTML, then it's easy to make it responsive. But if you try to dynamically create an SVG element, its difficult (or impossible I dunno?) to make it responsive.
I know that the SVG DOM is kind of different than the normal HTML DOM, so there can be unexpected results when trying to make changes to it dynamically.
How do I overcome this hurdle?

Sure, the SVG DOM is kind of different than the normal HTML DOM. So you'd better to use special-purpose svg lib to handle that. Use SVG.js or two.js to modify SVG node, not jQuery.
If you want to your app will be compatible with old bjust start your work, you can try Raphealjs too.

In your example http://jsfiddle.net/g5WZj/5/ the reason why your "dynamic" svg doesn't show up is because you haven't set a size on it. If you rightclick the svg part and inspect the svg element you'll find that its computed layout size in the page is 0x0.
You can set the width and height attributes on the <svg> element, or you can add something similar to your css stylesheet, e.g svg { width: 500px; height 500px; }

Related

SVG foreignObject not working properly on Safari

I have a problem with SVG's foreignObjects elements on Safari. I am working with SVG elements and what I am using d3.js library.
What I did is to append on canvas a foreignObject element because differently from rect or other SVG elements didn't allow to put html elements inside. Now, after some days of development I noticed that it seems that Safari doesn't allow to put html elements inside a foreignObject. Better, it allows to do and all seems to work according to the inspector, but the I put inside the foreignObject has a background set.
The result is that I can correctly drag the foreignObject and the div inside inside the canvas but differently from Chrome or Firefox, the div's background stay on the canvas top left corner not following the div.
Here below I paste the portion of the style and foreign object code I append to the canvas
SVG
<foreignObject transform="translate(304,215)rotate(-174.86597769360367)" height="180" width="40" class="dragging">
<div class="new-rect" style="background-image: url(data:image/png;base64,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); left:-45px;">
</div>
</foreignObject>
Style
foreignObject{
cursor:pointer;
position:relative;
}
foreignObject div.new-rect{
position: absolute;
top: -8px;
background-repeat: no-repeat;
background-size: auto;
height: 180px;
width: 130px;
}
That's all. I think I am doing something that Safari doesn't like. But question is .. what ?
Setting position: "fixed" on the div inside foreignObject fixed the foreignObject position for me in Safari (as well as on Chrome on iOS). It doesn't seem to scale the foreignObject according to the scaling of the SVG though
I've found that you need to insert a <body> element to get it work in Safari, like this:
<foreignObject width="170" height="28">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>my content</div>
</body>
</foreignObject>
Try adding in an inline width and height for the foreignObject. This seems to work on Safari.
<foreignObject style="overflow: visible;" y="0" x="0" width="240" height="160">
<div class="info-panel" xmlns="http://www.w3.org/2000/xmlns/" >
<div class="panel-text" xmlns="http://www.w3.org/2000/xmlns/">
<h1>ForeignObject</h1>
<p>For this to work in Safari try adding in a width and height inline on the foreignObject element. The background will also expand to the more text you add.</p>
</div>
</div>
</foreignObject>
Demo
https://codepen.io/chrisgannon/pen/2107d092ec56025bba036934d680f2bc
You can use <image> element in SVG instead of <foreignObject>. This can solve the scale and position issue easily to avoid <foreignObject> bug on Safari
Remember to change the src attribute to href.
Putting display:contents on the html tag inside puts it into place as of Safari 15.4. But you won't be able to interact much with it since the wrapping div is now nuked from the DOM. Defeating the whole purpose of foreignObject. Sing with me Safari is the new IE
Try wrapping your foreignObjects in group elements. I found that trying to style foreignObjects with transforms doesn't work well in Safari. Also most SVG's don't work in canvas elements in Firefox.
<g transform="translate(304,215)rotate(-174.86597769360367)">
<foreignObject>
<div> whatever in here </div>
<foreignObject>
</g>
I found a weird bug with iOS Safari regarding foreignObject. When I set the opacity in CSS for the HTML content within the foreignObject (it was a button in my case) it would position it absolutely over the SVG. But it positioned as expected when I removed the opacity. Took me hours to debug this issue.
A bit old, but I hope this could help:
As #do-ic suggested adding position: fixed to the element inside foreignObject solves the positioning, but not the scale.
To solve the scale I added this:
d3.zoom().on('zoom', event => {
// zoom stuff...
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
d3.selectAll(NODE_SELECTOR).style('transform', `scale(${transform.k})`);
}
});
Also the element inside foreignObject should have: transform-origin: 0px 0px
Hi i solved this behavior without viewbox and set a #svg height and width dimension
New solutions:
Do not use the following styles in Safari + foreignobjects:
position
webkit-transform-style
webkit-backface-visibility
transition
transform
calc (The calculation result may not conform to the expectation)
opacity
You can avoid style problems without using them
old:
I find #Quinn answer, Add some information, First , you need get your SVG transform information, like is <g class = "main-tree" transform="translate(875) scale(1.09)"></g> . and You can use d3.zoomTransform to get these data, let transform = d3.zoomTransform(d3.select("#treesvg").node());
The following content is the same as that of #Quinn ,You need to select the root element under the foreignObject,Do not execute the code in other browsers

Find code which is responsible for reducing opacity of Image

I need to reduce the opacity of image in site and I did it by decreasing opacity value in below code. But when I tried to search code: opacity: 0.3, I didn't get that code anywhere in the site files. I tried fgrep -r "opacity : 0.3", and still I didn't find it. Opacity code is coming from 3rd party plugin we are using.
Is there any way to override that opacity of the image [ Means Image which is displaying outside the Mug in link by adding new class?
Image :
Overriding style can be done with
style="opacity:1"
at the element.
Or create a new class in your css:
.aitraph>svg>image{
opacity:1 !important;
}
and give your element this ccs class.
The only way you could override it is by using the !important tag after you CSS property in your stylsheet. If you do not use the important then than the inline style will always take precedent to any style sheets.
Example:
.whateverClass {
color: 000 !important;
}
Edit: Now knowing that you do not have the ability to add a class to the element, you can use css child selectors as outlined below as I can see an ID on the svg parent object that you could target:
https://jsfiddle.net/sLtgsqyk/
html example:
<div id="test">
<svg width="391" height="391" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<image href="https://i.stack.imgur.com/KUQYl.png" x="0" y="0" height="1276" width="2000"/>
</svg>
</div>
CSS:
#test > svg > image
{
height: 1000px !important;
width: 1500px !important;
}
You can add new class to image (e.g. .opacity_img) and set style opacity:0.3!important
Don't like !important but it can help you

How can I access from CSS to the elements within the SVG file?

I have a svg file. I'm adding it through the <object data = "img/img.svg" type = "image/svg + xml">...
Svg file contains tag "path" with attribute "fill".
This svg file needs to be used several times, and use a different color for "fill".
it is necessary something like div.red #pathId {fill: red} and div.green #pathId {fill: green}
Css property do not apply to this svg file, as on the page it is similar to the iframe way, and => css not apply.
I know that we can in SVG file to specify the path to the CSS file. But then all the styles of this CSS file is used only for the SVG file. (.red and .green not available in SVG and => it does not apply)
Is there any solution without using JS?
(With JS we can get the contents of SVG through .contentDocument and set the fill attribute)
You can only access to the SVG if the SVG is an element of the HTML-DOM like this:
<div class="svg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="566.93px" height="1133.858px" viewBox="0 0 566.93 1133.858" enable-background="new 0 0 566.93 1133.858" xml:space="preserve">...</svg>
</div>
It's a html snippet from one of my projects. In the global css there are basic some styles:
.svg {
height: 400px;
width: 400px;
}
svg {
height: 100%;
width: 100%;
}
To include the SVG I use the following mechanism:
HTML:
<div class="svg" data-svgpath="img/img.svg"></div>
JS:
function loadSvg(container) {
if (container.dataset.svgpath) {
$(container).load(container.dataset.svgpath, function(resp, status, xhr) {
container.classList.add('is-loaded');
});
}
}
Load SVG and inject into the DOM:
$('.svg').each(function() {
loadSvg(this);
});
This is a short summary of what I do in the project and it works like a charm. I have access through the global css and js, because I manipulate the visibility of groups in the SVG too.
The browser support of inline svg is quite well: http://caniuse.com/#feat=svg-html5
EDIT:
Ah my mistake: you are looking for a solution without JS. Hm, sorry but may it's still helpful for you or someone other.
Ciao
Ralf

Overlay Div That Can Be Clicked Through

I was wondering if there is a way using css or javascript that allows for a semi-transparent div element to appear visually on top of all other elements, but hyperlinks and other interactive elements under it can still be clicked? Just a whimsical idea to give my website the ability to darken or lighten the look of the website.
EDIT
I know that z-index moves objects from the background to the foreground but they also block interactive objects...
Such behavior possible via poiner-events:none (non-standard and not supported by IE).
Originally being an SVG feature, it's supported for any SVG element (IE 9+):
<svg poiner-events="none">
<rect width="100%" height="100%" fill="black" fill-opacity="0.5" />
</svg>
But for the effect you mentioned I would recommend to use opacity on body and some background on html:
body {
opacity: 0.5;
}
html {
background: black;
}
create another div element on top of existing div, and have it's z-index more than the existing one. Hope this should help.

How to change argument of svg <g transform=scale(X)> with JavaScript?

Hey.
Let's say that somewhere on my page I have SVG graphics. There is one group that I would like to re-scale when some event is triggered. How do I do that?
example code:
<svg onresize="getDivSize(evt)">
<g transform=scale(13)>
<rect id="Square" class="chart"
width="80" height="20"
fill="black"
stroke-width="0px"
rx="8" ry="8" />
<text id="TextElement" x="13" y="15" fill="green">Text</text>
</g>
</svg>
I want to change scale(13) argument, to do that what should be in function getScreenSize(evt) {...}?
Or how achieve similar effect in different way?
edit
As for general idea I want to resize graphic without specifying fixed values anywhere. So my divs sizes are percentage based, now I just want my graphic to exactly fit my div regardless of its size. That's why I thought of JS changing scale() argument whenever event is fired (div resize). Function would put into scale argument computation of DivSize/rectBaseSize (x or y).
Add an id attribute to the <g> and then try this:
document.getElementById("id_of_g_element").transform.baseVal.getItem(0).setScale(new_scalex,newscale_y);
or alternatively:
document.getElementById("id_of_g_element").setAttribute("transform", "scale(" + new_scalex + "," + new_scaley + ")");
On the other hand, why don't you just use a viewBox to have the svg contents rescaled automatically? Or are there specific constraints on what should be shown? It's also possible to do some of that with non-scripted solutions based on CSS3 media-queries, see http://www.youtube.com/watch?v=YAK5el8Uvrg (don't forget to check the description for links to the demo files shown in that presentation).
If you 'just' want an SVG to scale to the size of a DIV, you can do that with CSS
#stretched-image {
margin: 0;
position:fixed;
top:0; left:0; right:0; bottom:0;
height:100%;
background-size:cover;
display: block;
background-position:50% 50%;
background-image: url(../img/pic.svg);
}

Categories

Resources