'Changing path property from svg file in css [duplicate]

Hey i want to animate my svg paths with css but i cant even change color of the stroke. Svg is in external file.

Svg code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2310 307.013">
  <g id="colored-waves" transform="translate(0 2.5)">
    <path id="wave-third" class="welcome-after-wave" pathLength="1" d="M2311.77,406.35c-192.532,0-192.532,150.013-385.009,150.013S1734.229,406.35,1541.752,406.35c-192.532,0-192.532,150.013-385.009,150.013S964.211,406.35,771.734,406.35C579.2,406.35,579.2,556.363,386.725,556.363S194.247,406.35,1.77,406.35" transform="translate(-1.77 -254.35)" fill="none" stroke="#5ec2dd" stroke-miterlimit="10" stroke-width="5"/>
    <path id="wave-secondary" class="welcome-after-wave" pathLength="1" d="M2311.77,406.35c-192.532,0-192.532,150.013-385.009,150.013S1734.229,406.35,1541.752,406.35c-192.532,0-192.532,150.013-385.009,150.013S964.211,406.35,771.734,406.35C579.2,406.35,579.2,556.363,386.725,556.363S194.247,406.35,1.77,406.35" transform="translate(-1.77 -330.35)" fill="none" stroke="#fac052" stroke-miterlimit="10" stroke-width="5"/>
    <path id="wave-primary" class="welcome-after-wave" pathLength="1" d="M2311.77,406.35c-192.532,0-192.532,150.013-385.009,150.013S1734.229,406.35,1541.752,406.35c-192.532,0-192.532,150.013-385.009,150.013S964.211,406.35,771.734,406.35C579.2,406.35,579.2,556.363,386.725,556.363S194.247,406.35,1.77,406.35" transform="translate(-1.77 -406.35)" fill="none" stroke="#ab8ddb" stroke-miterlimit="10" stroke-width="5"/>
  </g>
</svg>

Implementation of svg:

#welcome::after {
  content: url(../img/svg/colored-waves.svg);
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(144rem, 110vw);
  transform: translateX(-50%) rotate(15deg);
  z-index: -12;
}

Any idei how to change anything with this paths?

htmlcsssvg


Solution 1:[1]

As long is not a large SVG I recommend to you, if its possible, include de SVG file into your HTML. That way you just avoid to use javascript to access the external SVG file. If you are not able to copy the SVG code into your HTML perhaps you have to search how to access via javascript to the SVG file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Toni Bordoy

Related Questions