CODEWITHSUNDEEP
csssvg
Andrew Wei
Andrew Wei

Reputation: 1

Unable to Format SVG elements using CSS

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

Answers (1)

chrwahl
chrwahl

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

Related Questions