Changing path property from svg file in css

Question

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?

Do you not have access to the external file containing the SVG? — Sigurd Mazanti, Feb 28 '22 at 23:50
[this answer may help](https://stackoverflow.com/a/37671638/14862885),also if only you want to change svg color,then see [this](https://stackoverflow.com/a/58486348/14862885) — Neptotech -vishnu, Mar 01 '22 at 05:05

score 0 · Answer 1 · answered Feb 28 '22 at 23:54

0

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.

answered Feb 28 '22 at 23:54

Toni Bordoy

255
2
7

I was thinking about it but with inner html i would need to make changes in couple places, where with external svg i can make in one place and all its done – matju 1234 Mar 01 '22 at 05:26
If the animation it not depends on any event (like button click or something else) you can write the CSS (including @keyrames and so) inside SVG file with the ` – Toni Bordoy Mar 01 '22 at 08:57

Changing path property from svg file in css

1 Answers1