Insert current timestamp inside svg - javascript

I am trying to insert a current timestamp inside an svg image:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="618px" height="100px" viewBox="0 0 618 100" style="enable-background:new 0 0 618 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{font-family:'Arial-BoldMT';}
.st2{font-size:36;}
</style>
<rect x="3" y="30" class="st0" width="611" height="100"/>
<text transform="matrix(1 0 0 1 263.4561 55.7754)" class="st1 st2">
</text>
<script type="text/javascript"><![CDATA[
var text = document.getElementByTagName('text');
var time = new Date();
var textnode = document.createTextNode(time);
text.appendChild(textnode);
]]></script>
</svg>
https://jsfiddle.net/km87r2ug/
Any ideas why this won't work?

If you looked in your browser's error console you'd see that getElementByTagName does not exist. The function you want is getElementsByTagName which returns more than one element so I took the first one...
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="618px" height="100px" viewBox="0 0 618 100" style="enable-background:new 0 0 618 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{font-family:'Arial-BoldMT';}
.st2{font-size:36;}
</style>
<rect x="3" y="30" class="st0" width="611" height="100"/>
<text transform="matrix(1 0 0 1 263.4561 55.7754)" class="st1 st2">
</text>
<script type="text/javascript"><![CDATA[
var text = document.getElementsByTagName('text')[0];
var time = new Date();
var textnode = document.createTextNode(time);
text.appendChild(textnode);
]]></script>
</svg>

There is no document.getElementByTagName method. Try using document.querySelector instead.

Related

Edit html attribute of another page

I have code which is work for edit attributes of .svg file in same page
function changeInnerColor() {
var y = document.getElementsByClassName("inner");
var j;
for (j in y){
y[j].setAttribute("fill","#494949");
console.log(y[j]);
}
}
function changeOuterColor(){
var x = document.getElementsByClassName("outer");
var i;
for (i in x){
x[i].setAttribute("fill","#ff0");
console.log(x[i]);
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
<g id="Shape_1_copy_3_18_">
<ellipse fill="#0481D9" class="outer" cx="65" cy="65" rx="64" ry="64.018"/>
</g>
<g id="Shape_8">
<path fill="#FFFFFF" class="inner" d="M70.139,46.547h8.828V35.615h-8.828c-7.303,0-13.24,6.436-13.24,14.346v5.517H48.07v10.967h8.828v26.552
h11.033V66.444h11.035V55.478H67.932v-5.621C67.932,47.963,69.102,46.547,70.139,46.547z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
<g id="Shape_1_copy_3_22_">
<ellipse fill="#EE3849" class="outer" cx="65" cy="65" rx="64" ry="64.017"/>
</g>
<g id="Shape_153">
<path fill="#FFFFFF" class="inner" d="M74.044,52.203H63.407c-2.937,0-5.318,2.378-5.318,5.318c0,2.934,2.382,5.318,5.318,5.318h10.637
c2.46,0,5.318,4.061,5.318,9.307c0,5.131-4.771,9.307-10.637,9.307h-5.318c-5.864,0-10.637-4.772-10.637-10.637V44.225
c0-2.94-2.381-5.318-5.318-5.318c-2.937,0-5.318,2.378-5.318,5.318v26.592c0,11.729,9.544,21.273,21.273,21.273h5.318
c11.73,0,21.273-8.948,21.273-19.943C89.999,61.146,82.842,52.203,74.044,52.203z"/>
</g>
</g>
</svg>
<input id="button1" type="button" value="Change Inner Color" onclick="changeInnerColor()"/>
<input id="button2" type="button" value="Change Outer Color" onclick="changeOuterColor()"/>
But i need to add that .svg file with img and edit it like
<img scr="facebook.svg">
And i need make changes into facebook.svg page as per user action.
THANKS.
Set your image
<img scr="facebook.php?innercolor=FFFFF&outercolor=0481D9" id="myImage">
Create your svg using php
<?php
header('Content-Type: image/svg+xml ');
$innercolor = $GET['innercolor'];
$outercolor = $GET['outercolor'];
?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
<g id="Shape_1_copy_3_22_">
<ellipse fill="#<?php echo $innercolor; ?>" class="outer" cx="65" cy="65" rx="64" ry="64.017"/>
</g>
<g id="Shape_153">
<path fill="#<?php echo outercolor; ?>" class="inner" d="M74.044,52.203H63.407c-2.937,0-5.318,2.378-5.318,5.318c0,2.934,2.382,5.318,5.318,5.318h10.637
c2.46,0,5.318,4.061,5.318,9.307c0,5.131-4.771,9.307-10.637,9.307h-5.318c-5.864,0-10.637-4.772-10.637-10.637V44.225
c0-2.94-2.381-5.318-5.318-5.318c-2.937,0-5.318,2.378-5.318,5.318v26.592c0,11.729,9.544,21.273,21.273,21.273h5.318
c11.73,0,21.273-8.948,21.273-19.943C89.999,61.146,82.842,52.203,74.044,52.203z"/>
</g>
Update your image
function changeInnerColor() {
var y = document.getElementsByID("myImage");
y.src = "facebook.php?innercolor=494949&outercolor=0481D9";
}
function changeOuterColor(){
var x = document.getElementsByID("myImage");
x.src = "facebook.php?innercolor=494949&outercolor=ff0";
}
Use the object tag
<object id="img1" type="image/svg+xml" data="img.svg"/>

How to change the color of rect when mouse over by js?

I write this code,but turns out it can't change the color of rect when mouse over,could anyone tell me where is wrong and how can I fix it, please?`
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 288 560" style="enable-background:new 0 0 288 560;" xml:space="preserve">
<rect id="haha" x="83.4" y="130.7" width="121.2" height="115.2" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>
<script type="text/javascript">
function a(){
var ab=document.getElementById('haha');
ab.style.color="fill:#FFAEB9";
}
function b(){
var ab=document.getElementById('haha');
ab.style.color="fill:#FFFF00";
}
</script>
</svg>
You are accessing the color rule, which will change the text color of an HTML element. Just use the fillrule on the style property.
function a(){
var ab=document.getElementById('haha');
ab.style.fill = "#FFAEB9";
}
function b(){
var ab=document.getElementById('haha');
ab.style.fill = "#FFFF00";
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0" style="enable-background:new 0 0;" xml:space="preserve">
<rect id="haha" x="0" y="0" width="120" height="120" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>
</svg>
Fill does not go in color it goes in fill so you use style.fill=. It is its own style
function a(){
var ab=document.getElementById('haha');
ab.style.fill ="#FFAEB9";
}
function b(){
var ab=document.getElementById('haha');
ab.style.fill="#FFFF00";
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 288 560" style="enable-background:new 0 0 288 560;" xml:space="preserve">
<rect id="haha" x="83.4" y="130.7" width="121.2" height="115.2" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>
</svg>

Run Draw SVG use CSS

i have SVG path, and i want to make draw animation for this SVG like "CROSS"....
so could you help me guys,...?
<svg version="1.1" id="Layer_1" class="logo-cross" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50%" height="100%" viewBox="0 0 63.7 64.7" style="enable-background:new 0 0 63.7 64.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[.st0{fill:#929396;}.st1{fill:#F00;}]]>
</style>
<g>
<path class="st0" d="M1.3,1h3.5L1.3,4.5V1z M1.3,8.7L9,1h4.2L1.3,12.9V8.7z M1.3,54.7L55.1,1h-4.2L1.3,50.5V54.7z M1,63.1L63.1,1
h-4.2L1,58.9V63.1z M1.3,21.2L21.6,1h-4.2l-16,16V21.2z M1.3,46.3L46.7,1h-4.2L1.3,42.2V46.3z M1.3,38l37-37h-4.2L1.3,33.8V38z
M1.3,29.6L29.9,1h-4.2L1.3,25.4V29.6z"/>
<path class="st1" d="M1,59.6l3.5,3.5H1V59.6z M1,55.4l7.7,7.7h4.2L1,51.2V55.4z M1,13.6l49.5,49.5h4.2L1,9.4V13.6z M1,5.2
l57.9,57.9h4.2L1,1V5.2z M1,47.1l16,16h4.2L1,42.9V47.1z M1,21.9l41.2,41.2h4.2L1,17.7V21.9z M1,30.3l32.8,32.8H38l-37-37V30.3z
M1.3,38.7l24.4,24.4h3.9L1,34.5L1.3,38.7z"/>
</g>
</svg>
I would take a look at the D3 library as it will help you tremendously.

how to use snap.svg to loop through svg elements and create array of each ones path attribute

I have an svg image that has several different paths within it. How would I go about using snap to 'loop' the svg image and create an array with the ID of each element as a variable name and the path attribute of each element and the value of that array. (Eventually I would like to animate the path morphs.)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"
height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g id="start">
<path id="shape" d="M197.063,173.937c-34.624,8.446-44.945,28.214-37.234,56.383c-10.217,26.923-0.263,47.865,37.234,60.639
c-27.426,18.955-33.862,37.69-36.17,56.383c55.893-14.307,98.408-8.579,131.915,10.638c31.761-17.963,45.708-39.883,45.745-64.894
c-45.952,8.926-61.438-0.612-63.83-18.085c40.011-15.036,53.504-32.917,44.681-53.191
C261.068,217.78,215.96,204.763,197.063,173.937z"/>
</g>
<g id="middle">
<path id="shape_1" fill="#590E0E" d="M265.148,215.426c-34.624,8.446-113.03-13.275-105.319,14.894
c-10.217,26.923,39.099,4.248,76.596,17.021c-27.426,18.955-73.224,81.307-75.532,100c55.893-14.307,98.408-8.579,131.915,10.638
c31.761-17.963,45.708-39.883,45.745-64.894c-45.952,8.926-61.438-0.612-63.83-18.085c40.011-15.036,53.504-32.917,44.681-53.191
C324.589,80.138,328.73,149.424,265.148,215.426z"/>
</g>
<g id="final">
<path id="shape_2" fill="#146734" d="M31.106,44.149c-34.624,8.446,121.012,158.002,128.723,186.17
c-10.217,26.923,39.099,4.248,76.596,17.021c-27.426,18.955-73.224,81.307-75.532,100c55.893-14.307,98.408-8.579,131.915,10.638
c31.761-17.963,45.708-39.883,45.745-64.894c-45.952,8.926-61.438-0.612-63.83-18.085c40.011-15.036,53.504-32.917,44.681-53.191
C202.381,169.062,47.715,12.327,31.106,44.149z"/>
</g>
</svg>
If you use the selectAll method, it will bring to back an Array like Snap object (sounds like you need this rather than an array). So something like this maybe (untested).
var someObj = {};
var gs = s.selectAll('g');
gs.forEach(function(el) {
var p = el.select('path');
someObj[ el.attr('id') ] = p.attr('d');
});
fiddle

Interactive SVG with JavaScript | embed or not embed SVG?

I am trying to change the attribute of a circle in an SVG via javascript. When I have the SVG directly embeded in the HTML file, it works: 'kreis1' is changing color upon clicking a button. But when I have the SVG in an extra file (which I would like to have ultimatly when the SVG will have more than two circles), 'kreis1' doesn't react.
The is my SVG file, two circles:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"
onmouseover="evt.target.setAttribute('stroke-width','10');"
onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>
... and here is my HTML:
<!DOCTYPE html>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"
onmouseover="evt.target.setAttribute('stroke-width','10');"
onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>
<button onclick="getElementById('kreis1').innerHTML=changeColor()">Change!</button>
<object type="image/svg+xml" data="test.svg">
<html>
<head>
<script>
var htmlDocument = document;
function changeColor()
{
document.getElementById("kreis1").setAttribute("fill", "blue");
}
</script>
</head>
</html>
test.svg is a different document to the html document. Fortunately you can get the test.svg document via the contentDocument field on the <object> tag.
<!DOCTYPE html>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"
onmouseover="evt.target.setAttribute('stroke-width','10');"
onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>
<button onclick="getElementById('kreis1').innerHTML=changeColor()">Change!</button>
<object id="object1" type="image/svg+xml" data="test.svg">
<html>
<head>
<script>
var htmlDocument = document;
function changeColor()
{
document.getElementById("object1").contentDocument.getElementById("kreis1").setAttribute("fill", "blue");
}
</script>
</head>
</html>
It's a limitation of browser layout engines. External SVGs can't be styled by CSS. They have to be embedded in the HTML directly. JavaScript does permit interaction via the object tag per Robert's answer.
If you'd like to go down the embedding route (in my opinion it is more flexible) I've developed a script to automate this embedding, I've got a couple of hours so I'll bundle it up into something reusable this morning and update the question when it's done.
EDIT: Here's the embedding plugin, with docs: http://sakurasvg.appsondemand.com.au/

Categories