Export inline svg-object (IE issue) - javascript

Core issue:
I'm trying to grab an SVG-Inline-Object with JavaScript and send it to the Server where the output represents the given SVG-Object.
All works fine in Chrome & FF but IE (>= 9) cuts the given string of the SVG-Object anywhere, so the string sent to the server is not complete that ends up in an error.
My current process:
html
<html>
<head></head>
<body>
<div>
<svg>(expect a correctly generated svg-object here - works fine)</svg>
<a href='#export'>export</a>
<!-- click on this link triggers the javascript-function !-->
</div>
</body>
</html>
javascript (triggered by click on the "export"-Link)
var $svg = $(this).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("/Results/saveSVG/", // saveSVG => store SVG-Data in Session
{ "svg" : svgContent }).done(function(data) {
window.open("/Results/getSVG/svg.php");
});
/Results/saveSVG/ (a PHP-File)
$_SESSION["svg"] = $_POST["svg"]; // similar to something like this (works fine)
svg.php (works like a charm in Chrome / FF
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
What happens in Chrome / FF?
svgContent-variable:
<svg>...</svg>
svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php is a perfect SVG-File
What happens in IE?
svgContent-variable is cropped somewhere:
<svg>..
invalid svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php does not render
Debug-Information in IE
svgContent-variable: (Javascript)
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><clipPath id="DevExpress_28"><rect fill="none" stroke="none" stroke-width="0" x="0" y="0" width="263" height="300" rx="0" ry="0" /></clipPath><pattern id="DevExpressPattern_46" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#1498e7" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_47" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#7bc940" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_48" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#c7399a" stroke-width="2" d="M 0 6 L 6 0" /></pattern></defs><g class="series"><g class="series"><path fill="#0084d3" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#67b52c" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#b32586" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /></g></g><g class="labels"><g class="labels"><g><path fill="none" stroke="#0084d3" stroke-width="1" d="M 179 231 L 188 247" /><g transform="rotate(0)" x="187.9998589266569" y="246.99492667245295"><rect fill="#0084d3" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="243" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="192.9999" y="260"><tspan x="192.9999" dy="0">33 %</tspan></text></g></g><g><path fill="none" stroke="#67b52c" stroke-width="1" d="M 39 150.5 L 20 150.5" /><g transform="translate(6) rotate(0)" x="20.000000000042646" y="149.99990226156188"><rect fill="#67b52c" stroke="none" stroke-dasharray="none" stroke-width="0" x="-6" y="137" width="25" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="end" x="10" y="154"><tspan x="10" dy="0">...</tspan></text></g></g><g><path fill="none" stroke="#b32586" stroke-width="1" d="M 179 69 L 188 53" /><g transform="rotate(0)" x="188.00002821465443" y="53.00517106588667"><rect fill="#b32586" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="32" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="193" y="49"><tspan x="193" dy="0">33 %</tspan></text></g></g></g></g><g class="dxTooltip"><path visibility="hidden" opacity="0.1" fill="#000000" stroke="none" d="M 0 0" /><path visibility="hidden" fill="black" stroke="none" d="M 0 0 Z" /><text visibility="hidden" style="font-family: 'SegoeUI-Light', 'Segoe UI Light', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 26px; font-weight: 200; cursor: default; fill: #ffffff; fill-opacity: 0.75;" text-anchor="middle" x="0" y="0"><tspan x="0" dy="0">0</tspan></text></g><g class="tracker"><g class="seriesTracker" /><g class="markerTracker"><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" /><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" /><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" /></g></g></svg>
Same variable fully stored in the Session
Output with SVG is cut:
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><clipPath id="DevExpress_28"><rect fill="none" stroke="none" stroke-width="0" x="0" y="0" width="263" height="300" rx="0" ry="0" /></clipPath><pattern id="DevExpressPattern_46" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#1498e7" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_47" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#7bc940" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_48" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#c7399a" stroke-width="2" d="M 0 6 L 6 0" /></pattern></defs><g class="series"><g class="series"><path fill="#0084d3" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#67b52c" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#b32586" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /></g></g><g class="labels"><g class="labels"><g><path fill="none" stroke="#0084d3" stroke-width="1" d="M 179 231 L 188 247" /><g transform="rotate(0)" x="187.9998589266569" y="246.99492667245295"><rect fill="#0084d3" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="243" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="192.9999" y="260"><tspan x="192.9999" dy="0">33 %</tspan></text></g></g><g><path fill="none" stroke="#67b52c" stroke-width="1" d="M 39 150.5 L 20 150.5" /><g transform="translate(6) rotate(0)" x="20.000000000042646" y="149.99990226156188"><rect fill="#67b52c" stroke="none" stroke-dasharray="none" stroke-width="0" x="-6" y="137" width="25" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="end" x="10" y="154"><tspan x="10" dy="0">...</tspan></text></g></g><g><path fill="none" stroke="#b32586" stroke-width="1" d="M 179 69 L 188 53" /><g transform="rotate(0)" x="188.00002821465443" y="53.00517106588667"><rect fill="#b32586" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="32" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="193" y="49"><tspan x="193" dy="0">33 %</tspan></text></g></g></g></g><g class="dxTooltip"><path visibility="hidden" opacity="0.1" fill="#000000" stroke="none" d="M 0 0" /><path visibility="hidden" fill="black" stroke="none" d="M 0 0 Z" /><text visibility="hidden" style="font-family: 'SegoeUI-Light', 'Segoe UI Light', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana;
Conclusion
the above concept works fine in chrome and ff but fails on all tested IE-Versions (9 / 10 / 11)
I've also tried to add the values into a hidden textarea and send the form to svg.php (Same effect / Chrome and FF - okay / IE fails).
Is there anything I have to adjust in the $.post-Request or is there any other concept to export an inline-SVG-Object?
the solution (thanks to timclutton - answer)
The problem caused due to a double-defined xmlns-attributes in the opening tag. Because I have no ifluence in the method where the svg-object was created, a simple str_replace did the job:
svg.php
<?
session_start();
header("Content-type: image/svg+xml");
echo str_replace("xmlns=\"http://www.w3.org/2000/svg\" xmlns:NS1=\"\" NS1:xmlns:xlink=\"http://www.w3.org/1999/xlink\"","",$_SESSION["svg"]);
?>


I've built the following from the code you posted (with minor alterations) and this works for me in IE11 and FF30 on Win8.1 x64. Perhaps try putting these two files in a folder (with jQuery, or change the src to a CDN) and see if it works for you.
File svg.php:
<?php
session_start();
if ($_POST) {
$_SESSION['svg'] = $_POST['svg'];
exit;
}
?>
<html>
<head>
<title>blah</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function svg(e) {
var $svg = $(e).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("svg.php", // saveSVG => store SVG-Data in Session
{ "svg" : svgContent }).done(function(data) {
window.open("svg2.php");
});
}
</script>
</head>
<body>
<div>
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
export
<!-- click on this link triggers the javascript-function !-->
</div>
</body>
</html>
File svg2.php:
<?php
session_start();
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
?>
Update for actual SVG content
The problem seems to be with the opening tag. Changing it from...
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
...to...
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" version="1.1">
...makes it work with the code I posted above.
Update 2
Running your SVG code through the W3C Validator shows the errors. Using the modified opening tag I posted above validates successfully.
In conclusion, the problem is down to invalid XML.


Maybe it's not relevant, but have you tried this?
header("Content-type: image/svg+xml");
echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' .$_SESSION["svg"];
(extracted from https://stackoverflow.com/a/1623265/3625883)

Related

Svg which uses greensock to convert it only with css use

I'm trying to understand if it is how it can be possible to convert the animations of the following svg that greensock uses, using only the css code.
In the following example, I don't know why, only the animation of the browser and scrollbar seems to work, which scroll.
That of the terminal that opens and the code that you write on your own doesn't seem to work.
So the question is would it be possible to convert the following example which uses animations only using css.
Can you give me some suggestions?
(function() {
let illustration = document.querySelector('.Illustration');
if (!illustration) {
return;
}
const computer = gsap.timeline({
scrollTrigger: {
trigger: '.Illustration',
toggleActions: 'play none none none',
end: '+=10' // end after scrolling 500px beyond the start
}
});
computer
.to(
'#cursor',
{
repeat: 20,
keyframes: [
{
opacity: 0,
duration: 0.01,
delay: 0.4
},
{
opacity: 1,
duration: 0.01,
delay: 0.4
}
]
},
0
)
.from(
'.line',
{
scaleX: 0,
ease: Sine.easeOut,
stagger: {
duration: 3,
amount: 3
}
},
0
)
.to(
'#website',
{
ease: Sine.easeInOut,
yPercent: -60,
duration: 4
},
1
)
.to(
'#scrollbar',
{
ease: Sine.easeInOut,
yPercent: 260,
duration: 4
},
1
)
.to(
'#iterm',
{
opacity: 1,
delay: -0.1,
duration: 0.01
},
2
)
.from(
'#iterm',
{
ease: Elastic.easeOut.config(0.17, 0.2),
transformOrigin: '50% 50%',
y: 60,
x: -20,
duration: 1,
scale: 0
},
2
)
.fromTo(
'.steam',
{
opacity: 1,
drawSVG: '0%'
},
{
drawSVG: '100%',
duration: 3,
stagger: {
each: 0.5
}
},
2
)
.to(
'.steam',
{
opacity: 0,
duration: 4,
stagger: {
each: 0.5
}
},
3
);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://pastebin.com/raw/ywciu18p"></script>
<script src="https://pastebin.com/raw/u7GLGbfu"></script>
<svg
xmlns="http://www.w3.org/2000/svg" class="Illustration Hero__svg" preserveAspectRatio="xMinYMin meet" viewBox="120 200 300 288" width="300px" height="288px">
<defs>
<clipPath id="clippy">
<rect x="133.98" y="248.2" width="52.38" height="81.84" fill="none"></rect>
</clipPath>
<clipPath id="screen">
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="none"></rect>
</clipPath>
</defs>
<g style="isolation:isolate">
<g id="_1" data-name="1">
<rect id="shelf" x="10.16" y="266.81" width="99.83" height="4.23" fill="#404040"></rect>
<rect id="desk" x="37.83" y="380.3" width="282" height="10" rx="5" fill="#404040"></rect>
<g id="coffee">
<path d="M90.8 362a.87.87 0 01-1.74 0 2.14 2.14 0 00-.27-.89 3.33 3.33 0 00-.91-1.11 1.87 1.87 0 00-1.16-.41 1.79 1.79 0 00-.72.2l-.16.09a2.23 2.23 0 00-1 1.61 4.56 4.56 0 00.58 2.75c.08.16.18.34.29.52a17.28 17.28 0 002.71 3c1.79 1.72 3.65 3.51 4.2 6a.87.87 0 11-1.69.38c-.44-1.95-2.11-3.55-3.71-5.1a18.07 18.07 0 01-3-3.38c-.12-.2-.24-.41-.35-.63a6.31 6.31 0 01-.75-3.82 4 4 0 011.85-2.83l.28-.15a3.5 3.5 0 011.46-.39 3.6 3.6 0 012.25.76 5 5 0 011.41 1.71 4 4 0 01.43 1.69z" fill="#cc7d96"></path>
<path d="M107.54 356.89c.08 4.69-1.07 19.42-4.84 23.22h-8.08c-3.77-3.8-4.92-18.53-4.84-23.22z" fill="#dd859c" fill-rule="evenodd"></path>
<path opacity="0" class="steam" d="M99.48,350.34c-.56-.56-3-3.52,0-6.2s1.93-3.76.11-6.19" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4006; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M103.68,354.83c-.56-.56-3-3.52,0-6.19s1.93-3.76.11-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4011; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M93.57,354.83c-.57-.56-3-3.52,0-6.19s1.92-3.76.1-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 15.4049; stroke-dasharray: 0px, 999999px;"></path>
</g>
<g id="pc">
<polygon points="238.13 377.72 235.66 361.98 205.21 361.98 202.74 377.72 238.13 377.72" fill="#d2cfd6"></polygon>
<path d="M124.59 363.8a3.31 3.31 0 01-3.3-3.31v-18.76h198.29v18.76a3.32 3.32 0 01-3.31 3.31z" fill="#fff"></path>
<path d="M319.33 342v18.51a3.06 3.06 0 01-3.06 3.06H124.59a3.06 3.06 0 01-3-3.06V342h197.74m.5-.5H121v19a3.56 3.56 0 003.55 3.56h191.72a3.56 3.56 0 003.56-3.56v-19z" fill="#404040"></path>
<path d="M314.36 234.24H126.51a5.45 5.45 0 00-5.47 5.43v103.2h198.79v-103.2a5.45 5.45 0 00-5.47-5.43z" fill="#404040"></path>
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="#e3d1e5"></rect>
<rect x="188.3" y="377.72" width="64.27" height="2.36" fill="#eaeaea"></rect>
<ellipse cx="220.43" cy="353.63" rx="3.84" ry="3.81" fill="#333"></ellipse>
<g clip-path="url(#screen)">
<g id="vs-code">
<rect x="193.2" y="240.73" width="119.55" height="95.74" fill="#565266"></rect>
<rect x="193.2" y="240.73" width="119.55" height="6.45" fill="#b0baea"></rect>
<ellipse cx="198.98" cy="243.95" rx="1.4" ry="1.38" fill="#e84d4d"></ellipse>
<ellipse cx="204.19" cy="243.95" rx="1.4" ry="1.38" fill="#f2dd77"></ellipse>
<ellipse cx="209.14" cy="243.95" rx="1.4" ry="1.38" fill="#4eb785"></ellipse>
<g fill="#706d84">
<path d="M200.08 252.61c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.13 253.24l-.07-.61c1-.7 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.72c1.63 0 2.11.46 2.11 1s-.5 1.14-1.32 1.76h1.39v.67zM200.08 259.26c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54V258l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203.13 259.89l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1s-.5 1.15-1.32 1.77h1.39v.67zM200.08 265.91c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM205.23 266v.59h-.73V266h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.13l.73-.08v1.16h.37l-.07.67zM200.08 272.56c1.17-.08 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.13zM203.17 273.27v-.72c1.17-.09 1.53-.2 1.53-.49s-.39-.42-1.44-.54l.11-1.77h2l-.06.69H204v.59c1.11.17 1.44.56 1.44 1-.04.63-.7 1.15-2.27 1.24zM200.08 279.2c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.05-2.21 1.13zM203 278.55c0-1 .56-1.73 1.83-2.27l.32.65c-.84.31-1.19.61-1.33 1 .78-.45 1.67-.08 1.67.8a1.25 1.25 0 11-2.49-.17zm1.76.23c0-.48-.41-.67-1-.4v.09c0 .59.25.83.56.83s.44-.17.44-.52zM200.08 285.85c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.39 286.45a13.46 13.46 0 011.31-2.67h-1.6l.06-.7h2.33v.68a14.72 14.72 0 00-1.3 2.8zM200.08 292.5c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203 292.33a.92.92 0 00.05-1.74c0-.48.42-1 1.22-1 .63 0 1.13.33 1.13.84a1 1 0 01-.61.86c.36.21.68.47.68.89s-.49 1-1.3 1-1.17-.32-1.17-.85zm1.71 0c0-.25-.32-.44-.68-.64a.67.67 0 00-.29.52c0 .25.15.44.5.44s.48-.17.48-.35zm-.32-1.21a.63.63 0 00.27-.48c0-.23-.12-.4-.44-.4s-.42.14-.42.29.28.39.6.56zM200.08 299.15c1.17-.07 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.14zM203.33 299.25c.84-.32 1.19-.61 1.33-1-.78.44-1.67.08-1.67-.8a1.25 1.25 0 112.49.17c0 1-.56 1.73-1.83 2.27zm1.41-1.45v-.09c0-.59-.25-.83-.56-.83s-.46.17-.46.51c0 .49.41.67 1.02.41zM202.16 305.84v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM202.94 304.77c0-1.11.51-1.85 1.34-1.85s1.26.65 1.26 1.73-.51 1.85-1.35 1.85-1.25-.65-1.25-1.73zm.75-.07l1.05-.54c-.08-.38-.25-.61-.51-.61s-.54.38-.54 1.08zm1.1.09l-1 .53c.08.37.24.59.5.59s.5-.42.5-1.12zM202.16 312.49v.58h-.73v-.58H200a11.47 11.47 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM203.09 313.07v-.65h.91v-1.76h-.81v-.57l.81-.09v-.41l.76-.06v2.88h.82l-.06.65zM202.16 319.13v.59h-.73v-.59H200a11.44 11.44 0 01.33-2.87l.84.05-.55 2.15h.82v-1.07l.73-.08v1.15h.36l-.06.67zM203.13 319.72l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1.05s-.5 1.14-1.32 1.76h1.39v.67zM202.16 325.78v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82V324l.73-.07v1.15h.36l-.06.67zM203.15 325.74c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM202.16 332.43v.57h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM205.23 332.43v.57h-.73v-.59h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.37l-.07.67z"></path>
</g>
<g id="code">
<rect class="line" data-name="line" x="210.54" y="250.33" width="70.96" height="3.07" fill="#a3848d" opacity=".39" data-svg-origin="210.5399932861328 250.3300018310547" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 150.06; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="256.92" width="75.56" height="3.07" fill="#a58492" opacity=".39" data-svg-origin="210.5399932861328 256.9200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 159.26; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="263.57" width="61.58" height="3.07" fill="#a284a3" opacity=".39" data-svg-origin="210.5399932861328 263.57000732421875" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 131.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="270.28" width="52.68" height="3.07" fill="#9084a0" opacity=".39" data-svg-origin="210.5399932861328 270.2799987792969" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 113.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="276.86" width="43.68" height="3.07" fill="#83859e" opacity=".39" data-svg-origin="210.5399932861328 276.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 95.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="283.56" width="73.08" height="3.07" fill="#83929b" opacity=".39" data-svg-origin="210.5399932861328 283.55999755859375" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 154.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="290.42" width="85.72" height="3.07" fill="#829995" opacity=".39" data-svg-origin="210.5399932861328 290.4200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 179.58; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="296.86" width="71.54" height="3.07" fill="#84998b" opacity=".39" data-svg-origin="210.5399932861328 296.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 151.22; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="303.51" width="67.52" height="3.07" fill="#899985" opacity=".39" data-svg-origin="210.5399932861328 303.510009765625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="310.1" width="32.1" height="3.07" fill="#979987" opacity=".39" data-svg-origin="210.5399932861328 310.1000061035156" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 72.34; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="316.75" width="93.48" height="3.07" fill="#999488" opacity=".39" data-svg-origin="210.5399932861328 316.75" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 195.1; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="323.4" width="67.52" height="3.07" fill="#998e8a" opacity=".39" data-svg-origin="210.5399932861328 323.3999938964844" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.42" y="330.05" width="50.03" height="3.07" fill="#998c8c" opacity=".39" data-svg-origin="210.4199981689453 330.04998779296875" transform="matrix(0,0,0,1,210.42,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 108.2; stroke-dasharray: 0px, 999999px;"></rect>
</g>
</g>
<g id="iterm" opacity="0" data-svg-origin="283.99497985839844 311.64500427246094" transform="matrix(0,0,0,0,263.99498,371.645)" style="transform-origin: 0px 0px;">
<rect x="259.67" y="294.33" width="48.74" height="38.57" fill="#333"></rect>
<path d="M260.33 290.39h47.22a.86.86 0 01.86.86v4.38h-48.83v-4.49a.75.75 0 01.75-.75z" fill="#d3d3d3"></path>
<circle cx="262.39" cy="293.28" fill="#e84d4d" r="1.04"></circle>
<circle cx="266.28" cy="293.28" fill="#f2dd77" r="1.04"></circle>
<circle cx="269.99" cy="293.28" fill="#4eb785" r="1.04"></circle>
<path d="M264.11 303.17a.44.44 0 01-.29-.11.37.37 0 010-.56l1.36-1.28-1.36-1.29a.36.36 0 010-.55.41.41 0 01.58 0l1.66 1.56a.36.36 0 01.12.28.36.36 0 01-.12.27l-1.66 1.57a.46.46 0 01-.29.11z" fill="#83e5ab"></path>
<path id="cursor" d="M269.33 302.78a.4.4 0 00-.41-.39h-2.42a.39.39 0 100 .78h2.42a.4.4 0 00.41-.39z" fill="#83e5ab"></path>
</g>
<g class="webpage" clip-path="url(#clippy)">
<g id="website">
<rect x="133.88" y="243.41" width="52.47" height="242.13" rx="3.57" fill="#f0f0f2"></rect>
<line x1="141.67" y1="256.81" x2="174.02" y2="256.81" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="262.1" x2="179.77" y2="262.1" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="267.4" x2="174.02" y2="267.4" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<rect x="139.83" y="275.67" width="40.59" height="28.15" rx="3.22" fill="#f2c5c2"></rect>
<path d="M154.57 284.27a5.58 5.58 0 11-5.58-5.35 5.46 5.46 0 015.58 5.35z" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></path>
<line x1="144.8" y1="299.31" x2="161.56" y2="299.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.8" y1="294.69" x2="169.32" y2="294.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<g>
<rect x="139.83" y="308.41" width="37.69" height="49.32" rx="3.34" fill="#bdc0f4"></rect>
<line x1="146.12" y1="333.39" x2="157.69" y2="333.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="328.77" x2="163.05" y2="328.77" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="323.91" x2="168.46" y2="323.91" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="318.62" x2="172.42" y2="318.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="313.32" x2="168.46" y2="313.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
<g>
<rect x="139.83" y="363.82" width="40.59" height="58.46" rx="3.22" fill="#c2e7ef"></rect>
<line x1="144.98" y1="414.13" x2="158.87" y2="414.13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.85" y1="410.5" x2="163.18" y2="410.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.62" y1="406.69" x2="166.2" y2="406.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.68" y1="402.92" x2="164.8" y2="402.92" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.75" y1="399.16" x2="158.5" y2="399.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<rect x="144.8" y="368.54" width="29.22" height="23.21" rx="6.86" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></rect>
</g>
<g>
<rect x="140.38" y="433.67" width="39.82" height="40.46" rx="3.34" fill="#d0b6d1"></rect>
<line x1="147.03" y1="467.66" x2="170.62" y2="467.66" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="463.31" x2="174.81" y2="463.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="458.97" x2="170.62" y2="458.97" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="454.16" x2="159.25" y2="454.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="450.37" x2="164.91" y2="450.37" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="446.39" x2="170.62" y2="446.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="442.04" x2="174.81" y2="442.04" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="437.7" x2="170.62" y2="437.7" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
</g>
</g>
</g>
<rect x="133.98" y="243.95" width="52.38" height="4.25" fill="#ddd"></rect>
<ellipse cx="136.91" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<ellipse cx="140.38" cy="246.08" rx=".93" ry=".92" fill="#eaeaea"></ellipse>
<ellipse cx="143.69" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<rect x="133.88" y="330.05" width="52.47" height="2.85" fill="#eaeaea"></rect>
<rect x="182.52" y="248.2" width="3.84" height="81.84" fill="#fff"></rect>
<rect id="scrollbar" x="183.24" y="249.77" width="2.4" height="22.21" rx="1.02" fill="#ddd"></rect>
</g>
</g>
</g>
</svg>

SVG circle radius in path

I have SVG code to draw busy indicator. How to reduce the radius of path so that cicle looks small in size?
<svg >
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>

You need to set the viewbox of the SVG within your HTML. Then you can change the size of the SVG within your CSS. See this guide https://css-tricks.com/scale-svg/ for more details and the snippet below I made as an example.
#svgid1{
height: 40px;
border: 1px solid;
background-color: lightblue;
}
#svgid2{
height: 75px;
border: 1px solid;
background-color:lightskyblue;
}
#svgid3{
height: 100px;
border: 1px solid;
background-color: lightseagreen;
}
<svg id="svgid1" viewBox="0 0 50 50">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
<svg id="svgid2" viewBox="0 0 50 50">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
<svg id="svgid3" viewBox="0 0 50 50">
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>

How to animate stroke in svg image on hover

I'm trying to make a single stroke in my svg drawing to be highlighted on hover.
Is it possible to be done with css or do I need to use javascript?
Here's my html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g>/g></svg>
As you can see I tried 'animate' but it doesn't work.
I also tried css like here:
g#Warstwa_1 path
{ stroke: red; }
g#Warstwa_1:hover path { stroke: blue; }
This makes the whole image to change color instead of a single line.
Here's live example:
http://www.ewelinawoloszyn.com/index11.html
Any suggestions are more than welcome. Many thanks in advance for your help.

You need to set the :hover state on the actual path element.
Also note that your SVG has a malformed closing <g> at the end.
svg {
margin-top: -200px;
/* demo positioning */
}
#Warstwa_1 path {
stroke-width: 2px;
/* for demo pusposes only */
transition: stroke .4s;
}
#Warstwa_1 path:hover {
stroke: red;
}
<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 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g></g></svg>

I had to add closing tag for .hi class and added
g#Warstwa_1_kopia {
display:block;
}
Then Paulie_D CSS worked.

for animation, you can use this code(CSS-animation) and modify according to your requirement
svg:hover path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
stroke: blue;
}
}
here I apply hover effect on svg(tag).
and for more details about CSS-animation check the link.

How to specify the coordinates x and y in a path tag svg?

I have a svg who represents some containers and I want to add dynamically with JavaScript a cross in each container.
I have this code to add a cross in the container:
.close-x {
stroke: black;
fill: transparent;
stroke-linecap: round;
stroke-width: 2;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 140,12 L 150,25 M 150,12 L 140,25"></path>
</g>
</svg>
but it's static and I want to make it dynamically.
With JavaScript I can get the position of the <text> (I can't provide a fiddle because it never works I don't know why but in my JS it works)
var list = document.getElementsByTagName("svg")[0].childNodes[1].childNodes;
console.log(list)
for (var x in list) {
if (list.hasOwnProperty(x)) {
if(list[x].tagName === "text"){
console.log("-----------------");
console.log(list[x]);
console.log("y: ");
console.log(list[x].y.baseVal[0].valueAsString);
console.log("x: ")
console.log(list[x].x.baseVal[0].valueAsString);
//<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
}
}
}
But if I try to do <path class="close-x" y="81" x="125"></path> I doesn't show the cross...

For a path element to show up it needs a d attribute to determine its shape. You can't use x and y attributes for a path. What you can do is to add a translate transform to the path, e.g:
<path class="close-x" transform="translate(10, 20)" d="M 140,12 L 150,25 M 150,12 L 140,25"></path>
So use JS to find the attributes of the text element (might be best to give it an id) and use these for the transform.
var textEl = document.getElementsByTagName('text')[0];
var pathEl = document.getElementsByTagName('path')[0];
var x = parseFloat(textEl.getAttribute('x')) - 8;
var y = parseFloat(textEl.getAttribute('y')) - 29;
pathEl.setAttribute("transform", "translate(" +
x + " " + y + ")");
.close-x {
stroke: black;
fill: transparent;
stroke-linecap: round;
stroke-width: 2;
}
rect {
fill: #FEFECE;
stroke: #A80036;
stroke-width: 1.5;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="555px" preserveAspectRatio="none" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g id="messageBox" >
<!--entity cadvisor-->
<rect filter="url(#f491e1k)" height="46.29" width="97" x="100" y="0"></rect>
<rect height="10" width="15" x="177" y="5"></rect>
<rect height="2" width="4" x="175" y="7"></rect>
<rect height="2" width="4" x="175" y="11"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="115" y="33.3027">cadvisor</text>
<path class="close-x" d="M 0,0 l10,13 M 10,0 l-10 13"></path>
</g>
</svg>
Notice that the cross starts at (0, 0) but is moved to where the text is.

here is the solution founded with the help of #Peter Collingridge
document.getElementById("a").onclick = function(){
var textEl = document.getElementsByTagName('text')[0];
var x = parseFloat(textEl.getAttribute('x')) - 8;
var y = parseFloat(textEl.getAttribute('y')) - 29;
$(textEl).after("<path class='close-x' transform='translate("+x +"," + y +")' d='M 0,0 l10,13 M 10,0 l-10 13'></path>");
var myHtml = $("#b").html();
document.getElementById("b").innerHTML = myHtml;
}
.close-x {
stroke: black;
fill: transparent;
stroke-linecap: round;
stroke-width: 2;
}
rect {
fill: #FEFECE;
stroke: #A80036;
stroke-width: 1.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="a">click</button>
<div id="b">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="555px" preserveAspectRatio="none" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g id="messageBox" >
<!--entity cadvisor-->
<rect filter="url(#f491e1k)" height="46.29" width="97" x="100" y="0"></rect>
<rect height="10" width="15" x="177" y="5"></rect>
<rect height="2" width="4" x="175" y="7"></rect>
<rect height="2" width="4" x="175" y="11"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="115" y="33.3027">cadvisor</text>
</g>
</svg>
</div>

how to maintain SVG color intensity with lower opacity

I am working on a coloring application with a .PNG background (a photo of a building) and .SVG elements over the background. These .SVG paths are then being colored with the help of a JavaScript code. I started with setting the opacity of the .SVG layers to i.e. 0.65
In this case the .PNG background is visible behind the colored .SVG but the colors seem 'washed out' because the lowered opacity. Is there a way to maintain the intensity of the colors, i.e. to overlay the colored .SVG path on the .PNG background?
Here is the HTML part :
<div class="building_area_eave_1" id="building_area">
<svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px; opacity:0.65;">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
with the CSS :
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("../images/1_part_eave_background.png") no-repeat;
}

hi do you expecting like this..???
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg") no-repeat;
}
svg#full_x5F_wall_x5F_w_x5F_eave ~ #main_wall_1 {
opacity: 0.65;
}
<div class="building_area_eave_1" id="building_area">
<svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px;">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
and here is the demo code..!!
Demo code

You can use blend modes in your svg:
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
Here is a sample:
<svg width="500px" height="500px" viewBox="0 0 1000 1000">
<defs>
<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
<path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="45 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="green" transform="rotate(90 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(181,213,74)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="90 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="greenblue" transform="rotate(135 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(104,193,159)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="135 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="blue" transform="rotate(180 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(112,178,226)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="180 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="violet" transform="rotate(225 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(166,141,197)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="225 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="pink" transform="rotate(270 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(213,135,172)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="270 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="red" transform="rotate(315 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(246,116,93)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="315 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<filter id="blendit">
<feImage xlink:href="#orange" x="0" y="0" result="1"/>
<feImage xlink:href="#yellow" x="0" y="0" result="2"/>
<feImage xlink:href="#green" x="0" y="0" result="3"/>
<feImage xlink:href="#greenblue" x="0" y="0" result="4"/>
<feImage xlink:href="#blue" x="0" y="0" result="5"/>
<feImage xlink:href="#violet" x="0" y="0" result="6"/>
<feImage xlink:href="#pink" x="0" y="0" result="7"/>
<feImage xlink:href="#red" x="0" y="0" result="8"/>
<feBlend mode="multiply" in="1" in2="2" result="12"/>
<feBlend mode="multiply" in="12" in2="3" result="123"/>
<feBlend mode="multiply" in="123" in2="4" result="1234"/>
<feBlend mode="multiply" in="1234" in2="5" result="12345"/>
<feBlend mode="multiply" in="12345" in2="6" result="123456"/>
<feBlend mode="multiply" in="123456" in2="7"result="1234567"/>
<feBlend mode="multiply" in="1234567" in2="8" result="FINAL"/>
<feColorMatrix type="hueRotate" values="0">
<animate attributeName="values" attributeType="XML" values="0; 0; 0 ; 0 ; 0 ; 0 ;180;360;360" dur="12s" repeatCount="indefinite"/>
</feColorMatrix>
</filter>
</defs>
<rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
</svg>
Full details here: https://css-tricks.com/basics-css-blend-modes/

OK, thanks to the link provided by #ramtin-gh I managed to solve this issue.
Adding a mix-blend-mode property to the SVG layers resulted the colors to display multiply to the background image.
HTML :
<div class="building_area_eave_1" id="building_area">
<svg class="svg_overlay" version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
with the CSS style :
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("../images/1_part_eave_background.png") no-repeat;
}
.svg_overlay {
margin-top:9px;
mix-blend-mode: multiply;
}
I'm not posting all the SVG layers here to keep the post simple. Thanks for your replies. Hope this can help someone with similar issue.

Categories

Resources