0

Im having trouble changing the color of a svg that is loaded usign "content: url("svg-path")". The svg is using currentcolor for fill, and is changing color fine if the svg is loaded directly in the html. The two Svg images should be the same color.

The Svg in question

<svg
    fill="currentcolor"
    viewBox="0 0 200 200"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
  <defs/>
  <g
  fill="currentcolor">
    <circle       
      id="path846"
      cx="105.50797"
      cy="128.38446"
      r="45.161354" />
  </g>
</svg>

I have the current test setup to display my issue 

.container {
    width: 500px;
    height: 500px;
    color: #6592d5;
  }
  .test::before {
    content: url("Path to svg file");
  }
<div class="container">
        <svg
           fill="currentcolor"
           viewBox="0 0 200 200"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:svg="http://www.w3.org/2000/svg">
          <defs/>
          <g
             fill="currentcolor">
            <circle       
               id="path846"
               cx="105.50797"
               cy="128.38446"
               r="45.161354" />
          </g>
        </svg>

      <span class="test">  
      </span>
    </div>
lyxar
  • 1
  • 2
  • I prob misunderstood what you mean. there are many ways you can change color of an svg either you can change the svg itself by opening it into a notepad(any app you can open it) then save it or you can call it as an image then change the color from there. heres a link that might help you understand more about it.. https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element – Crystal Oct 18 '22 at 07:49
  • The problem is, that I would like for it to be changed using css, so I can change the color of a svg, to match a theme color. This would not be possible if I would have to change it in the svg file. And calling it in the html is a last resort, since i would be reusing the svg many times. – lyxar Oct 18 '22 at 07:56

0 Answers0