I'm trying to create a popout menu for an array of values that are echoed from the database. On the click of the svg, the popout menu that corresponds with the svg in the echo, needs to be shown. Except so far, it only works for the first one that is echoed. How to I fix it so that it show the popout that corresponds with the correct svg. Here's what I've currently got :
PHP/HTML :
echo('
<svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5C15.8284 10.5 16.5 9.82843 16.5 9C16.5 8.17157 15.8284 7.5 15 7.5C14.1716 7.5 13.5 8.17157 13.5 9C13.5 9.82843 14.1716 10.5 15 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="menu-option-popout"></div>
');
JS :
document.querySelector(".option-3").addEventListener("click", function(){
document.querySelector(".menu-option-popout").style.display = "block";
});
If each popout <div> appears immediately after its corresponding <svg> tag (as in your example), you can take advantage of the .nextElementSibling property to get the <div> that follows the <svg> that was clicked.
At the end of your HTML:
<script>
// Add an event listener to each .option-3 element:
document.querySelectorAll('.option-3').forEach(item => {
item.addEventListener('click', event => {
let popout = event.target.nextElementSibling; // This element's next element (a .menu-option-popout)
popout.style.display = 'block'; // Show the popout
})
})
</script>
First of all PHP is executed first, so you will not be able to call php from a JS action unless using AJAX features. But it is not your use case here.
That said, we can continue with :
echo('
<svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5C15.8284 10.5 16.5 9.82843 16.5 9C16.5 8.17157 15.8284 7.5 15 7.5C14.1716 7.5 13.5 8.17157 13.5 9C13.5 9.82843 14.1716 10.5 15 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="menu-option-popout"></div>
');
should be written as this to improve the readability of your generated HTML document :
echo '<svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5C15.8284 10.5 16.5 9.82843 16.5 9C16.5 8.17157 15.8284 7.5 15 7.5C14.1716 7.5 13.5 8.17157 13.5 9C13.5 9.82843 14.1716 10.5 15 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="menu-option-popout"></div>'.PHP_EOL;
And it is only HTML stored inside database, so there are many things to look at :
Any bad escaped string can put the mess inside your displayed datas
Any bad char's encoding can put the mess inside your displayed datas
Maybe just call the equiv .toogle() JQuery method of ECMAScript on that .option-3 class will work and display your item as you wish.
Related
I have this SVG:
<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
data-v-41e50536="" data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91
8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon>
</svg>
This is a blue star. I want to do add an arbitrary number of these stars to an existing div using JavaScript.
How could I do it?
Update :
This is the existing div (it already has five stars and a short paragraph):
<div class="stars-real-container" id="dsc1">
<svg style="fill:#1780df; color: #1780df; margin-right: 6px; "
xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-star" data-v-41e50536=""
data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon>
</svg>
<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
data-v-41e50536="" data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon>
</svg>
<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
data-v-41e50536="" data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon>
</svg>
<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
data-v-41e50536="" data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon>
</svg>
<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em"
height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"
data-v-41e50536="" data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon>
</svg>
<p class="number-of-comments" id="dc1">(۱۲ نظر )</p>
</div>
Its CSS:
.stars-real-container {
height: 100%;
width: 50%;
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
}
The idea is to have stars to show the popularity of something. I have not ever created SVG elements with JavaScript. I checked several other stackoverflow threads like This. But it was a simple SVG.
There are many options to do that. The easiest way is this one in my opinion.
Updated code:
document.querySelector('.stars-real-container').innerHTML = '<svg style="fill:#1780df; color: #1780df; " xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" lass="feather feather-star" data-v-41e50536="" data-v-50fd7d5a=""><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" data-v-41e50536="" data-v-50fd7d5a=""></polygon></svg>' + document.querySelector('.stars-real-container').innerHTML;
To keep your paragraph as the last-child, you have to put the svg as first child and then add the existing content (+ document.querySelector('.stars-real-container').innerHTML)
This is a "deliberate" solution example where I clone the "star". Might be better ways but this is one way. Note I put the color of the star in CSS to illustrate how to do that also - could be done by using classes to provide a value fo the currentColor. I made mine more "pink" :)
Note I went with the "clone" approach so I could put the svg element in the HTML and not have to muck with string constants for the SVG, harder to maintain etc.
let howMany = 4;
let prettystar = document.getElementById("star-container").querySelector('svg');
let targetElement = document.querySelector("#star-target").querySelector('.star-me');
for (let step = 0; step < howMany; step++) {
let pclone = prettystar.cloneNode(true);
console.log(step)
targetElement.appendChild(pclone);
}
.star-me {
color: #df80df;
}
#star-container {
display: none;
}
<div id="star-container">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star" data-v-41e50536=""
data-v-50fd7d5a="">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91
8.26 12 2"
data-v-41e50536="" data-v-50fd7d5a=""></polygon></svg>
</div>
<div id="star-target"><span>Please make me a star!</span>
<span class="star-me"></span>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a cubic bezier. And I don't know how to put an arrow in the middle of it. Example below:
I want it to be like this, but with bezier. How can I do this.
Note: I've tried textPaths, markers. But nothing helped.
You have two options:
Position the marker(s), yourself, at the correct place
Split the line into two paths. One up to the first marker, and one for the rest of the path. Then assign an end marker on each path.
#1 Solution
I thank #Paul LeBeau, who found a solution and below the implementation:
We make two patches: a straight line and a curve at the end of which
there will also be markers.
<path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" />
<path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0
0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/>
For accurate positioning of the marker, the following attributes are
used: refX="10", refY="5"
<svg width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<marker id="MarkerArrow" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="10" markerHeight="10">
<polyline points="0,0 10,5 0,10 3,5" fill="red"/>
</marker>
</defs>
<style>
#line_Path, #curve_Path {
fill:none;
stroke:red;
stroke-width:2;
marker-end:url(#MarkerArrow);
}
</style>
<path id="line_Path" d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1" />
<path id="curve_Path" d="m89.5 22.9c0 0 7.3 0 7.3 6.5 0 24 0 65.4 0 65.4 0 0-2.5 7.6 7.1 7.6 29.6 0 77.5 0 77.5 0l0 0"/>
</svg>
#2 Solution
You can draw an arrow as an independent object
<polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>
And place it on the curve the required number of times with the help
of the command
<use xlink:href="#MarkerArrow" x="80" y="18"/>
<svg width="200" height="120" viewBox="0 0 200 120" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<polyline id="MarkerArrow" points="0,0 10,5 0,10 3,5" fill="red"/>
</defs>
<path d="m20.8 22.9c0 0 47.7-0.3 68.9-0.1 5.4 0 6.8 2.9 6.9 6.8 0.4 22.6-0.8 45.9 0 66.6 0.2 4.2 2.6 6.5 6.6 6.6C129.1 103.1 180 102.2 180 102.2l0.7 0.5" style=" fill:none; stroke:red; stroke-width:2; "/>
<use xlink:href="#MarkerArrow" x="80" y="18"/>
<use xlink:href="#MarkerArrow" x="178" y="97"/>
</svg>
I forked a CodePen app by the Angular Material Team and am trying to replace their user avatar icon with an icon I made in Inkscape.
This is their code, in an app directive template field:
<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>
The code I see in Inkscape's XML editor or when opening the SVG file with Notepad++ is quite a bit different:
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="rb icon.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient4179"
osb:paint="solid">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop4181" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6394886"
inkscape:cx="-607.16873"
inkscape:cy="903.12934"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showborder="false"
showguides="false"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
id="path3336"
cx="-602.85712"
cy="69.505058"
r="151.42857" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4158"
width="193.80003"
height="144.85301"
x="-699.19604"
y="24.652056" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4162"
width="155.71428"
height="155.71428"
x="373.2374"
y="322.82352"
transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
<rect
style="fill:#ffffff;fill-opacity:1"
id="rect4173"
width="19.512196"
height="71.951218"
x="-682.92682"
y="-47.637794"
ry="9.7560978" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
x="-635.36584"
y="20.654888"
id="text4195"
sodipodi:linespacing="127%"><tspan
sodipodi:role="line"
id="tspan4197"
x="-635.36584"
y="20.654888"
style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-597.46344"
y="54.801228"
id="text4199"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4201"
x="-597.46344"
y="54.801228"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text>
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z"
id="rect4207"
inkscape:connector-curvature="0" />
<path
style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z"
id="rect4207-6"
inkscape:connector-curvature="0" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
id="rect4307"
width="47.575813"
height="54.895168"
x="-626.08392"
y="115.31452" />
</g>
</svg>
and when I try replacing the default user avatar SVG with mine it breaks the website. The web console says
Uncaught SyntaxError: Invalid or unexpected token.
Here's the directive with the original SVG:
app.directive('userAvatar', function() {
return {
replace: true,
template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
};
});
I've tried a dozen variations on this, but using a 1-line style where I insert only class="user-avatar" into the new XML here is what the updated directive looks like:
app.directive('userAvatar', function() {
return {
replace: true,
//template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
template: '<svg class="user-avatar" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="rb icon.svg"> <defs id="defs4"> <linearGradient id="linearGradient4179" osb:paint="solid"> <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop4181" /> </linearGradient> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1.6394886" inkscape:cx="-607.16873" inkscape:cy="903.12934" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="false" showguides="false" inkscape:window-width="1536" inkscape:window-height="801" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <circle style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" id="path3336" cx="-602.85712" cy="69.505058" r="151.42857" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4158" width="193.80003" height="144.85301" x="-699.19604" y="24.652056" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4162" width="155.71428" height="155.71428" x="373.2374" y="322.82352" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" /> <rect style="fill:#ffffff;fill-opacity:1" id="rect4173" width="19.512196" height="71.951218" x="-682.92682" y="-47.637794" ry="9.7560978" /> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;" x="-635.36584" y="20.654888" id="text4195" sodipodi:linespacing="127%"><tspan sodipodi:role="line" id="tspan4197" x="-635.36584" y="20.654888" style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text> <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="-597.46344" y="54.801228" id="text4199" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan4201" x="-597.46344" y="54.801228" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z" id="rect4207" inkscape:connector-curvature="0" /> <path style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1" d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z" id="rect4207-6" inkscape:connector-curvature="0" /> <rect style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none" id="rect4307" width="47.575813" height="54.895168" x="-626.08392" y="115.31452" /> </g> </svg>'
};
});
You can reproduce the error by replacing the original directive with the one above in the CodePen app.
Original: https://codepen.io/team/AngularMaterial/pen/mVxgbg
Broken: https://codepen.io/hack-r/pen/LRdVPN
It is tipical " ,' problem You have ' inside Your string representing svg, change all ' to " and it will work. First of them in svg is 'sans-serif, Normal'.
Your code breaks because string starts on ' and ends on first ' which is inside svg string so next part of code has error syntax.
I have this svg path:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500' height='500'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 189,100.09448 200,0" id="arrowline"></path></svg>
I want to be able to increase and decrease the length of the "#arrowline" path, with an animation, keeping the arrowhead also in the correct place while animating. I tried various methods but they were either too complicated for implementing or didn't work. Probably I am missing something. Any help appreciated. Thank you.
I don't know what you mean by "correct" - do you mean the following?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500px' height='500px'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 10 10 l200,0" id="arrowline">
<animate attributeName="d" from="m 10 10 l200,0" to="m 10 10 l400,0" dur="1s" repeatCount="indefinite"/>
</path>
</svg>
Trigger animation when svg is in the viewport
I have a page with a big header image and an svg animation below the fold.
Here's the example:
html, body {
height: 100%;
margin: 0
}
.header-image {
height: 100%;
background-color: #ffcc00
}
/*Line animations*/
.line {
stroke-dasharray: 150;
stroke-dashoffset: 150;
animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation-fill-mode: forwards;
}
#line01, #line02 {
animation-delay:1s;
-webkit-animation-delay:1s;
}
#line03, #line04 {
animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}
#line05, #line06 {
animation-delay:1.6s;
-webkit-animation-delay:1.6s;
}
#line07, #line08 {
animation-delay:1.9s;
-webkit-animation-delay:1.9s;
}
#line09, #line10 {
animation-delay:2.3s;
-webkit-animation-delay:2.3s;
}
#line11,
#line12,
#line13,
#line14,
#line15,
#line16,
#line17,
#line18{
animation-delay:3.1s;
-webkit-animation-delay:3.1s;
}
#line19,
#line20,
#line21,
#line22,
#line23,
#line24,
#line25,
#line26{
animation-delay:3.5s;
-webkit-animation-delay:3.5s;
}
/*Keyframes*/
#keyframes dash {
0% {stroke-dashoffset: 150;}
100% {stroke-dashoffset: 0;}
}
#-webkit-keyframes dash {
0% {stroke-dashoffset: 150;}
100% {stroke-dashoffset: 0;}
}
<div class="header-image">Please scroll down</div>
<div class="svg-animation">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="guida" x="0px" y="0px" viewBox="0 0 480.669 305.346" enable-background="new 0 0 480.669 305.346" xml:space="preserve">
<rect id="ombra-carta01" x="52.2" y="31.8" transform="matrix(-0.9026 0.4305 -0.4305 -0.9026 331.4025 234.5817)" fill="#A2DEF1" width="174" height="246.1"/>
<path id="ombra-occhiali" fill="#A2DEF1" d="M406.66 105.7 c-4.273-0.759-20.888-8.967-33.1-12.474c-12.225-3.512-30.973-5.673-34.362-5.288c-4.051 0.459-4.223 0.747-4.973 3.6 c-0.75 2.86-0.772 5.4 1.3 6.642c2.683 1.5 2.2 5 1.9 14.967c-2.108 4.115-3.231 8.417-3.774 11.1 c-1.042 5.2 3.5 8.4 6.4 3.745c2.822 4.8 8.4 8.9 19 11.889c18.588 5.2 27.35-5.681 30.177-9.188 c5.041-6.253 5.85-16.103 15.383-14.193c9.534 1.9 6.7 11.2 8.9 18.887c1.259 4.3 4.9 17.9 24.1 20.2 c10.921 1.3 17.632-0.292 22.104-3.697c0.914 5.5 6.3 4.3 7.35-0.96c0.546-2.726 1.171-7.168 0.795-11.811 c3.57-9.194 4.472-12.6 7.528-12.981c2.4-0.299 3.373-2.688 3.782-5.617c0.41-2.93 0.362-3.263-3.2-5.246 c-2.979-1.66-21.113-6.885-33.747-8.354C430.991 105.7 416.7 107.5 406.7 105.694z"/>
<path id="fine-asta-dx" fill="#254659" d="M333.111 84.4 c23.972 4.3 106.6 28 118.9 33.554c12.3 5.5 10.6 21.7 9.3 28.158c-1.297 6.473-9.299 6.76-7.104-4.195 c2.193-10.955 2.428-17.082-5.075-19.285c-7.504-2.203-109.515-28.483-116.636-30.113C325.357 90.9 328.4 83.2 333.1 84.4 z"/>
<path id="fine-asta-sx" fill="#254659" d="M469.952 111.8 c-23.768-5.291-109.196-15.194-122.675-14.834c-13.479 0.359-18.091 15.947-19.387 22.421s5.978 9.8 8.172-1.136 c2.194-10.955 4.337-16.699 12.11-15.843c7.773 0.9 112 15.9 119.2 17.127C474.609 120.8 474.8 112.5 470 111.8 z"/>
<path id="montatura" d="M435.583 151.139c16.586 1.1 22.116-5.72 25.721-14.82 c4.24-10.709 5.044-14.575 8.313-14.983c2.399-0.299 3.372-2.688 3.782-5.617c0.409-2.93 0.362-3.263-3.201-5.246 c-2.979-1.66-21.113-6.885-33.747-8.354c-0.287-0.033-0.577-0.063-0.868-0.093v3.04c10.722 1.3 21.4 4.6 24 7 c5.566 5 0.8 22.641-5.935 30.514c-3.718 4.371-10.928 6.027-18.09 5.686V151.139z M400.826 100.8 c-4.274-0.759-20.888-8.967-33.101-12.475c-1.937-0.556-4.037-1.078-6.215-1.562v3.164c10.889 2.3 22.7 6.8 25.8 13.1 c4.493 9.401-9.373 27.347-19.625 29.896c-1.816 0.452-3.909 0.615-6.135 0.52v2.915c12.997 0.5 19.536-7.608 21.905-10.548 c5.042-6.253 5.85-16.103 15.384-14.193c9.533 1.9 6.7 11.2 8.9 18.887c1.258 4.3 4.9 17.9 24.1 20.2 c1.308 0.2 2.6 0.3 3.7 0.354v-2.87c-6.226-0.296-12.414-2.102-16.24-4.946c-8.479-6.302-14.364-28.202-6.597-35.148 c4.281-3.828 13.587-4.225 22.837-3.108v-3.04C424.432 100.9 410.6 102.6 400.8 100.828z M361.51 86.8 c-11.565-2.569-25.294-4.049-28.147-3.726c-4.051 0.459-4.223 0.747-4.973 3.608c-0.75 2.86-0.772 5.4 1.3 6.6 c2.86 1.6 2.1 5.5 1.9 17.028c-0.191 10.5 2.7 19.4 21.6 24.697c3.01 0.8 5.8 1.3 8.3 1.36v-2.915 c-9.958-0.431-22.591-6.071-25.262-14.423c-3.147-9.843-0.785-27.983 6.275-30.445c2.736-0.953 10.573-0.455 19 1.337V86.792z"/>
<path id="riflesso-bottom" fill="#B0CAD9" d="M342.523 88.6 c6.276-2.188 39.4 3.3 44.7 14.452c4.493 9.401-9.373 27.347-19.625 29.896c-9.948 2.477-28.129-3.686-31.396-13.903 C333.102 109.2 335.5 91.1 342.5 88.619L342.523 88.619z M459.608 112.069c-4.949-4.436-37.619-12.161-46.861-3.896 c-7.768 6.946-1.882 28.8 6.6 35.148c8.228 6.1 27.4 7.4 34.33-0.739C460.369 134.7 465.2 117.1 459.6 112.069z"/>
<path id="riflesso-top-sx" fill="#D1E2EB" d="M345.894 88.2 c10.529-0.32 36.7 5.1 41.4 14.913c3.151 6.594-2.729 17.39-10.059 24.13L345.894 88.158z"/>
<path id="riflesso-top-dx" fill="#D1E2EB" d="M418.783 105.355l31.898 39.8 c1.146-0.716 2.158-1.559 2.992-2.539c6.695-7.873 11.501-25.523 5.935-30.514C455.452 108.3 431.7 102.3 418.8 105.355z"/>
<path id="retro-aste" fill="#617F91" d="M452.192 108.6 c-8.324-1.297-18.175-2.673-28.473-4.008c-2.935 0.211-5.595 0.716-7.759 1.6l0 0l-0.059 0.024l-0.017 0.007l-0.041 0 l-0.059 0.024l-0.058 0.025h-0.001l-0.057 0.024l-0.058 0.024l-0.042 0.019l-0.016 0.007l-0.113 0.051l-0.026 0.013l-0.029 0 l-0.057 0.026l-0.056 0.026l-0.011 0.004l-0.045 0.022l-0.056 0.026l-0.051 0.024l-0.004 0.002l-0.055 0.026l-0.055 0 l-0.035 0.018l-0.02 0.011l-0.054 0.026l-0.054 0.028l-0.021 0.01l-0.033 0.019l-0.054 0.028l-0.013 0.007l-0.087 0 l-0.005 0.003l-0.053 0.029l-0.043 0.023l-0.009 0.006l-0.053 0.028l-0.052 0.029l-0.027 0.016l-0.023 0.014l-0.051 0 l-0.051 0.029l-0.051 0.03l-0.05 0.03l-0.051 0.03l0 0l-0.05 0.03l-0.05 0.031l-0.049 0.031l-0.049 0.031l-0.048 0.031l-0.022 0 l-0.026 0.018l-0.048 0.031l-0.048 0.032l-0.009 0.006l-0.039 0.026l-0.08 0.056l-0.009 0.006l-0.005 0.004l-0.009 0 l-0.084 0.06l-0.029 0.021l-0.017 0.012l-0.046 0.034l-0.046 0.033l-0.016 0.013l-0.029 0.021l-0.045 0.034l-0.044 0 l-0.005 0.003l-0.039 0.031l-0.045 0.035l-0.035 0.028l-0.008 0.006l-0.003 0.002l-0.084 0.069l-0.023 0.02l-0.019 0 l-0.085 0.071l-0.011 0.011l-0.113 0.099l-0.043 0.039l-0.014 0.013l-0.029 0.026l-0.026 0.024l-0.017 0.015l-0.039 0 l-0.002 0.002l-0.042 0.04l-0.012 0.011l-0.03 0.03l-0.024 0.023l-0.017 0.017l-0.037 0.037l-0.004 0.004l-0.041 0.041l-0.009 0 l-0.031 0.032l-0.021 0.021l-0.019 0.021l-0.034 0.035l-0.005 0.007l-0.04 0.042c-0.938 1.008-1.644 2.262-2.142 3.7 c19.726 5.1 36.2 9.4 39 10.253c7.503 2.2 7.3 8.3 5.1 19.285l-0.005 0.024c2.821-3.578 5.257-8.839 6.642-14.028 c-1.398-4.124-4.051-7.831-8.789-9.959c-0.717-0.322-1.673-0.705-2.843-1.144c5.22 0.8 9.6 1.4 12.8 1.9 c-0.122-2.879-0.866-5.261-2.421-6.654C458.445 111 455.8 109.8 452.2 108.647L452.192 108.647z M350.696 88.3 c8.174 2 17.8 4.5 27.8 7.258c2.633 1.3 4.9 2.8 6.6 4.476h0.001l0.044 0.045l0.006 0 c0.072 0.1 0.1 0.1 0.2 0.219l0.025 0.027l0.018 0.019l0.042 0.045l0.043 0.045l0.014 0.015l0.028 0.031l0.041 0 l0.042 0.046l0.002 0.002l0.039 0.043l0.04 0.046l0.032 0.036l0.009 0.01l0.04 0.046l0.04 0.046l0.021 0.024l0.019 0 l0.039 0.046l0.039 0.047l0.011 0.012l0.028 0.034l0.038 0.047l0.038 0.046l0 0l0.037 0.047l0.038 0.047l0.026 0.033l0.01 0 l0.037 0.047l0.035 0.047l0.037 0.047l0.035 0.047l0.036 0.047l0.006 0.01l0.028 0.038l0.034 0.047l0.033 0.044l0.002 0 l0.034 0.048l0.033 0.048l0.022 0.031l0.011 0.016l0.033 0.048l0.032 0.048l0.013 0.019l0.021 0.029l0.031 0.047l0.032 0 l0.004 0.006l0.027 0.042l0.03 0.048l0.026 0.041l0.005 0.007l0.03 0.049l0.029 0.048l0.019 0.028l0.012 0.021l0.029 0 l0.029 0.049l0.009 0.017l0.019 0.032l0.028 0.048l0.028 0.049l0.002 0.004l0.025 0.046l0.026 0.049l0.022 0.039l0.005 0 l0.026 0.05l0.04 0.075l0.013 0.022l0.05 0.099l0.007 0.014l0.018 0.036l0.048 0.099l0.024 0.053l0.009 0.017l0.016 0 l0.016 0.033l0.009 0.019l0.022 0.051l0.001 0.002l0.023 0.053l0.007 0.015l0.016 0.039l0.014 0.031l0.009 0.021l0.021 0 l0.001 0.005l0.022 0.053l0.005 0.013l0.017 0.041l0.041 0.108l0.021 0.054l0.004 0.011l0.016 0 c0.462 1.3 0.6 2.7 0.5 4.182c-20.156-2.878-36.996-5.244-39.944-5.569c-7.773-0.856-9.917 4.888-12.11 15.843l-0.021 0.1 c-1.242-4.382-1.474-10.187-0.757-15.526c2.882-3.294 6.772-5.718 11.993-5.857c0.785-0.021 1.816-0.007 3.1 0 c-5.132-1.308-9.462-2.407-12.614-3.198c1.222-2.61 2.826-4.521 4.797-5.208C343.999 88.1 347 88 350.7 88.319z"/>
<path id="riflesso-aste-top-sx" fill="#8097A6" d="M345.893 88.158l12.551 15.6 c7.396 1 18 2.5 29.7 4.194c0.09-1.494-0.073-2.904-0.535-4.182l-0.016-0.044l-0.004-0.011l-0.021-0.054l-0.041-0.108 l-0.017-0.041l-0.005-0.013l-0.022-0.053l-0.001-0.005l-0.021-0.049l-0.009-0.021l-0.014-0.031l-0.016-0.039l-0.007-0.015 l-0.023-0.053l-0.001-0.002l-0.022-0.051l-0.009-0.019l-0.016-0.033l-0.016-0.036l-0.009-0.017l-0.024-0.053l-0.048-0.099 l-0.018-0.036l-0.007-0.014l-0.05-0.099l-0.013-0.022l-0.04-0.075l-0.026-0.05l-0.005-0.009l-0.022-0.039l-0.026-0.049l-0.025-0.046 l-0.002-0.004l-0.028-0.049l-0.028-0.048l-0.019-0.032l-0.009-0.017l-0.029-0.049l-0.029-0.048l-0.012-0.021l-0.019-0.028 l-0.029-0.048l-0.03-0.049l-0.005-0.007l-0.026-0.041l-0.03-0.048l-0.027-0.042l-0.004-0.006l-0.032-0.049l-0.031-0.047 l-0.021-0.029l-0.013-0.019l-0.032-0.048l-0.033-0.048l-0.011-0.016l-0.022-0.031l-0.033-0.048l-0.034-0.048l-0.002-0.003 l-0.033-0.044l-0.034-0.047l-0.028-0.038l-0.006-0.01l-0.036-0.047l-0.035-0.047l-0.037-0.047l-0.035-0.047l-0.037-0.047 l-0.01-0.013l-0.026-0.033l-0.038-0.047l-0.037-0.047l0 0l-0.038-0.046l-0.038-0.047l-0.028-0.034l-0.011-0.012l-0.039-0.047 l-0.039-0.046l-0.019-0.021l-0.021-0.024l-0.04-0.046l-0.04-0.046l-0.009-0.01l-0.032-0.036l-0.04-0.046l-0.039-0.043l-0.002-0.002 l-0.042-0.046l-0.041-0.046l-0.028-0.031l-0.014-0.015l-0.043-0.045l-0.042-0.045l-0.018-0.019l-0.025-0.027 c-0.07-0.073-0.142-0.146-0.214-0.219l-0.006-0.006l-0.044-0.045h-0.001c-1.659-1.653-3.926-3.147-6.559-4.476 c-10.013-2.731-19.623-5.251-27.797-7.258C348.887 88.2 347.3 88.1 345.9 88.158z"/>
<path id="riflesso-aste-top-dx" fill="#8097A6" d="M452.192 108.6 c-8.324-1.297-18.175-2.673-28.473-4.008c-1.761 0.126-3.422 0.358-4.937 0.716l9.427 11.751c10.996 2.9 19 5 20.9 5.5 c7.503 2.2 7.3 8.3 5.1 19.285l-0.005 0.024c2.821-3.578 5.257-8.839 6.642-14.028c-1.398-4.124-4.051-7.831-8.789-9.959 c-0.717-0.322-1.673-0.705-2.843-1.144c5.22 0.8 9.6 1.4 12.8 1.898c-0.122-2.879-0.866-5.261-2.421-6.654 C458.445 111 455.8 109.8 452.2 108.647z"/>
<rect id="carta01" x="46.3" y="26.9" transform="matrix(-0.9026 0.4305 -0.4305 -0.9026 318.206 227.8356)" fill="#FFFFFF" width="174" height="246.1"/>
<line class="line" id="line26" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="182.6" y1="239.7" x2="224" y2="220"/>
<line class="line" id="line25" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="179.3" y1="232.8" x2="238.6" y2="204.6"/>
<line class="line" id="line24" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="176.1" y1="226" x2="235.3" y2="197.7"/>
<line class="line" id="line23" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="172.8" y1="219.1" x2="232.1" y2="190.9"/>
<line class="line" id="line22" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="169.5" y1="212.2" x2="228.8" y2="184"/>
<line class="line" id="line21" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="166.2" y1="205.4" x2="225.6" y2="177.2"/>
<line class="line" id="line20" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="163" y1="198.5" x2="222.3" y2="170.3"/>
<line class="line" id="line19" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="159.7" y1="191.7" x2="219" y2="163.4"/>
<line class="line" id="line18" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="113.7" y1="272.5" x2="142.6" y2="258.7"/>
<line class="line" id="line17" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="110.4" y1="265.6" x2="168.8" y2="237.8"/>
<line class="line" id="line16" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="107.1" y1="258.8" x2="165.5" y2="231"/>
<line class="line" id="line15" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="103.9" y1="251.9" x2="162.3" y2="224.1"/>
<line class="line" id="line14" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="100.6" y1="245" x2="159" y2="217.3"/>
<line class="line" id="line13" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="97.3" y1="238.2" x2="155.7" y2="210.4"/>
<line class="line" id="line12" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="94.1" y1="231.3" x2="152.4" y2="203.5"/>
<line class="line" id="line11" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="90.8" y1="224.5" x2="149.2" y2="196.7"/>
<line class="line" id="line10" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="62.5" y1="166.6" x2="118.3" y2="140.1"/>
<line class="line" id="line09" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="59.3" y1="159.7" x2="187.5" y2="98.7"/>
<line class="line" id="line08" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="56" y1="152.9" x2="184.2" y2="91.8"/>
<line class="line" id="line07" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="52.7" y1="146" x2="181" y2="85"/>
<line class="line" id="line06" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="49.5" y1="139.1" x2="177.7" y2="78.1"/>
<line class="line" id="line05" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="46.2" y1="132.3" x2="174.4" y2="71.3"/>
<line class="line" id="line04" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="42.9" y1="125.4" x2="171.2" y2="64.4"/>
<line class="line" id="line03" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="39.7" y1="118.6" x2="167.9" y2="57.5"/>
<line class="line" id="line02" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="36.4" y1="111.7" x2="164.6" y2="50.7"/>
<line class="line" id="line01" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="54.4" y1="82.6" x2="130.7" y2="46.3"/>
</svg>
</div>
http://jsfiddle.net/qx7p46f3/4/
By the time the user has scrolled down, the animation has already played because it starts as soon as the page is loaded. I want to trigger it when the svg is in the viewport instead, when the user scrolls to that specific part of the page. How can I do that?
I don't know much about js but I'd rather not use jquery cause it doesn't seem to be the most efficient solution in this case, correct me if I'm wrong.
If you don't know much about javascript, then you might want to consider jQuery since it will be a lot easier for you to accomplish the desired effect.
Using a plugin like jQuery.onScreen you could simply write:
$('svg').onScreen({
container: window,
direction: 'vertical',
toggleClass: 'onScreen',
});
And in your css:
.onScreen .line {
animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
-webkit-animation-fill-mode: forwards;
}
Edit:
Without jQuery:
var wrapper = document.querySelector('.svg-animation');
window.onscroll = function (event) {
if (wrapper.getBoundingClientRect().top < 0) {
wrapper.className = "svg-animation onScreen";
window.onscroll = null;
}
}
Please note that this hasn't been tested in all browsers and I can't guarantee full support.
Here's a working demo: http://codepen.io/btpoe/pen/caeb32b678521d82144ae1f953c3e332