Reputation: 1
I am trying to add animations to my SVG elements via CSS but I am unable to reference them. I can't even get the color ("stroke") to change via CSS. Would be great if you could show the correct CSS to reference the "path" elements :)
#svgGroup #Path6 {
stroke: black;
stroke-dasharray: 20px;
animation: line-anim 20s ease forwards;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1320.287" height="229.42" viewBox="0 0 1320.287 229.42">
<defs>
<style id="test">
.cls-1 {
stroke: #FFF;
stroke-linecap: round;
stroke-width: 10px;
}
</style>
</defs>
<g id="svgGroup" data-name="Group 2" transform="translate(-964.213 -1101.711)">
<path id="Path_6" data-name="Path 6" class="cls-1" d="M0,0V104" transform="translate(1146.5 1219)"/>
<path id="Path_7" data-name="Path 7" class="cls-1" d="M0,0V25" transform="translate(1160.5 1219)"/>
<path id="Path_8" data-name="Path 8" class="cls-1" d="M32,0,0,13" transform="translate(1160.5 1219)"/>
</g>
</svg>
Upvotes: 0
Views: 61
Reputation: 13176
My first comment would be: Don't confuse yourself... When looking at your code you can see the viewBox and all the transform/translate statements have large numbers, both positive and negative values. So, try to keep it more simple. I changed the viewBox so that you have a "canvas" of 100x100.
One of the reasons for the CSS not working was a typo -- the ID is called Path_6
. But in general try to avoid using IDs. Stick to classes in relation to your CSS. And then again, try not confusing yourself by testing something that has a white stroke.
#svgGroup #Path_6 {
stroke: black;
stroke-dasharray: 20px;
animation: line-anim 20s ease forwards;
}
<svg xmlns="http://www.w3.org/2000/svg" width="400" viewBox="0 0 100 100">
<defs>
<style id="test">
.cls-1 {
stroke: gray;
stroke-linecap: round;
stroke-width: 10px;
}
</style>
</defs>
<g id="svgGroup" data-name="Group 2">
<path id="Path_6" data-name="Path 6" class="cls-1" d="M0,0V104" stroke-width="5" transform="translate(10 10)"/>
<path id="Path_7" data-name="Path 7" class="cls-1" d="M0,0V25" transform="translate(20 10)"/>
<path id="Path_8" data-name="Path 8" class="cls-1" d="M32,0,0,13" transform="translate(30 10)"/>
</g>
</svg>
Upvotes: 1