Retrieve a computed svg color with javascript - javascript

I've got a CSS variable that dynamically sets the background color of an SVG element with a CSS variable.
Now I wanted to write a unit test that checks if the color is set properly on the object. Unfortunately, I can't seem to retrieve this value with javascript.
I've created a jsfiddle with my current unsuccessful progress: https://jsfiddle.net/Lmfjdc4e. Upon pressing the checkColor button the wrong fill and background-color attribute is written into the console.
Can I even retrieve the correct computed color of a svg element? If yes how?
Here is the complete source of the jsfiddle:
function checkColor() {
var circle = document.getElementById('circle');
var style = window.getComputedStyle(circle);
var fill = style.getPropertyValue('fill');
var bgColor = style.getPropertyValue('background-color');
console.log(fill) //url(#myGradient)
console.log(bgColor) //rgba(0, 0, 0, 0)
}
.myClass {
--background-color: rgb(255, 0, 0)
}
<svg xmlns="http://www.w3.org/2000/svg" class="myClass" viewBox="0 0 300 200" height="150">
<defs>
<linearGradient id="myGradient">
<stop offset="0" stop-color="var(--background-color)" />
</linearGradient>
</defs>
<circle id="circle" cx="50" cy="165" r="35" fill="url(#myGradient)"/>
</svg>
<button onClick="checkColor()">checkColor</button>

You need to get the exact property you are setting. In this case, it will be the following:
var bgColor = style.getPropertyValue('--background-color');
The dashes affect the name of the property.
Edit:
See the following jsfiddle:
https://jsfiddle.net/x90fcLd8/11/
Evaluating the url on the fly for the fill seems to be the only way to get the correct color.

Related

Change Position of svg element using JS

Trying to make an svg rectangle that moves when button pushed. Right now I just want the x to be modified by a function.
function modX()
{
document.getElementById("rectangle").transform = 'translate(295 115)';
}
var x = 20;
var y = 20;
modX();
<svg width="1000" height="1000" >
<rect id="rectangle" x="0" y="20" width="100" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</svg>
I'm fairly new to code so please avoid css or jquery.
you can change its x by using javaScript document.getElementById("rectangle").setAttribute('x', X_value)
set the X_value to the value you want it to change.

add SVGs inside an SVG programmatically

I need to add SVG objects to specific locations inside an SVG object that's appended to the DOM.
But whenever I do that I see nothing rendered on the screen. I can see the SVG objects are added (in Elements tab of DevTools) but they're not rendered. They're pure SVG (not wrapped around an HTML element like a DIV).
I've tried loading SVGs with ajax and adding them, tried to do with Snap, tried to have these elements inside a <defs> tag, find them with Snap and then add them to the main Snap object. Nothing seems to work. The objects are always added but not rendered.
Is that even possible?
The SVG
<svg width="400" height="300" style="background: gray">
<defs>
<circle id="redc" cx="50" cy="50" r="50" style="fill: red" />
<circle id="yelc" cx="40" cy="40" r="40" style="fill: yellow" />
</defs>
<circle id="bluc" cx="200" cy="200" r="50" style="fill: blue" />
</svg>
JavaScript
const s = Snap("#root");
Snap.load('images/all.svg', function(data){
var all = data;
// append the all.svg node. cool
s.append( all.node );
// get the red circle definition
var redc = all.select('#redc');
s.append(redc.node); // doesn't work
});
with foreign object:
Snap.load('images/all.svg', function(data){
var all = data;
// append the all.svg node. cool
s.append( all.node );
// get the red circle definition
var redc = all.select('#redc');
// foreign object
var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
foreign.setAttribute('width', 500);
foreign.setAttribute('height', 150);
foreign.appendChild(redc);
// add the foreign object - doesn't work
s.append( foreign );
});
It doesn't work because you're appending the circle outside of the <svg> tree i.e. directly under #root which is probably some kind of HTML element such as a <div>
The foreignObject problem is basically the same. Not sure why you're trying to add a circle as a child of a foreignObject (that won't work as you'd need an svg element to be its parent). I've used an html element instead.
const s = Snap("#root");
var svg = '<svg width="400" height="300" style="background: gray"><defs><circle id="redc" cx="50" cy="50" r="50" style="fill: red" /><circle id="yelc" cx="40" cy="40" r="40" style="fill: yellow" /></defs><circle id="bluc" cx="200" cy="200" r="50" style="fill: blue" /></svg>';
var all = Snap.parse(svg);
// append the all.svg node. cool
s.append( all.node );
// get the red circle definition
var redc = all.select('#redc');
all.node.append(redc.node); // append as a child of the svg node
// foreign object
var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
foreign.setAttribute('width', 500);
foreign.setAttribute('height', 150);
foreign.setAttribute('fill', 'pink');
var p = document.createElement('p');
foreign.appendChild(p);
var text = document.createTextNode("Hello World");
p.appendChild(text);
// add the foreign object to the correct part of the tree
all.node.append( foreign );
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<div id="root"></div>

need to set value for r(radius) in the <circle> tag using javascript

I have a scatter plot with line created using D3.js (as shown in the image).
The initial value to the circle radius is set to 4 however, when mouseover or click event are fired on the circle it should become 6 (r=6).
Whereas I am able to achieve this in chrome as following:
document.getElementById('dotGain' + count).style.r = 6;
the same doesn't work in IE.
The HTML created as dom is:
<circle xmlns="http://www.w3.org/2000/svg" class="dotGain" id="dotGain51" style="cursor: pointer; fill: red;" cx="440.621" cy="3.78507" r="4" />
I need to modify the r="4" to "6" on click/mouseOver in IE.
Some added help:
I tried the following to achieve the required in IE, but in vain
document.getElementById('dotGain' + count).r.animVal.valueAsString = "6";
document.getElementById('dotGain' + count).r.animVal.value = 6;
You should be changing the r attribute, not the style; and this is wrong: document.getElementById('#MyCircle') because you have a hashtag in the id name.
See a working example here:
var c = document.getElementById('c');
c.addEventListener('click', function(){
c.setAttribute('r', 6);
})
Click the circle
<svg viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="4" id="c"/>
</svg>
r is a element attribute. To change it You can use jQuery
$(el).attr('r', 6)
or in vanilla js
el.setAttribute('r', 6);

How to add an animated svg via javascript?

<svg width="5cm" height="3cm" viewBox="0 0 500 300">
<path id="path1" d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="7.06" />
<circle r="17.64" fill="red">
<animateMotion dur="6s" repeatCount="1" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</circle>
</svg>
If I write the svg in plain html/svg file, it works fine, the circle animates correctly.
But if I add the circle element dynamically via javascript, circle was added, but it didn't animate. What's wrong? js code:
var svg = $("svg"); //use jquery
var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
circle.setAttribute("r", "5");
circle.setAttribute("fill", "red");
var ani = document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
ani.setAttribute("dur", "26s");
ani.setAttribute("repeatCount", "indefinite");
ani.setAttribute("rotate", "auto");
var mpath = document.createElementNS("http://www.w3.org/2000/svg","mpath");
mpath.setAttribute("xlink:href", "#path1");
ani.appendChild(mpath);
circle.appendChild(ani);
svg.append(circle);
Use setAttributeNS on "mpath" instead of setAttribute.
mpath.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#path1");
Here's a demo: http://jsfiddle.net/zh553/
Agree with using setAttributeNS on "mpath" instead of setAttribute.
However at least for Chrome (and other WebKit based browsers?) it seems to be necessary to pay attention to http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS where it says the second parameter is the qualifiedName, the qualified name of the attribute to create or alter.
mpath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#path1");
Or, if needed, more generically:
mpath.setAttributeNS("http://www.w3.org/1999/xlink",
mpath.lookupPrefix("http://www.w3.org/1999/xlink") + ":href",
"#path1");
Also discussed at https://bugs.webkit.org/show_bug.cgi?id=22958

How do I get the width of a scaled SVG element with JavaScript?

If I have inline SVG, including an element which has been scaled...
<g transform="scale(sX,sY)">
<rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" />
</g>
... or which is in a <svg> element with a viewBox attribute:
<svg viewBox="20 20 5000 1230">
<g transform="scale(sX,sY)">
<rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" />
</g>
<svg>
... how can I programmatically find the new scaled width in pixels of myElement - without manually detecting the scaling and doing the math? So far myElement.getBBox().width returns 245 without accounting for the scaling.
please check this fiddle http://jsfiddle.net/T723E/. Click on the rectangles and note the firebug console.
Here i have hard coded a number .3 which is 300px width of div containing svg node / 1000 user units.
After seeing the bounty, this is the function i have return to get the scaled width without much (with no maths i'm not sure.)maths.Use matrix.d for getting scaled height
var svg = document.getElementById('svg');
function getTransformedWidth(el){
var matrix = el.getTransformToElement(svg);
return matrix.a*el.width.animVal.value;
}
var ele = document.getElementById('myElement_with_scale')
console.log("scale width----", getTransformedWidth(ele))
Please look this fiddle for complete code http://jsfiddle.net/b4KXr/
Have you investigated the parameter you can use with getBBox()?
http://raphaeljs.com/reference.html#Element.getBBox

Categories