How to change style attributes of a . svg?

Asked

Viewed 70 times

0

I was wondering if there is any way to edit the style attributes, more specific the Fill attribute, of an image imported from the format .svg.

Example:

In my html i import a file .svg through a <img> thus:

<img class="menuimage" src="./assets/target.svg">

This is the lines of code inside the file target.svg:

<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.5 0C17.6868 0 0 17.6868 0 39.5C0 61.3132 17.6868 79 39.5 79C61.3132 79 79 61.3132 79 39.5C79 17.6868 61.3132 0 39.5 0ZM56.4286 41.6161C56.4286 42.004 56.1112 42.3214 55.7232 42.3214H42.3214V55.7232C42.3214 56.1112 42.004 56.4286 41.6161 56.4286H37.3839C36.996 56.4286 36.6786 56.1112 36.6786 55.7232V42.3214H23.2768C22.8888 42.3214 22.5714 42.004 22.5714 41.6161V37.3839C22.5714 36.996 22.8888 36.6786 23.2768 36.6786H36.6786V23.2768C36.6786 22.8888 36.996 22.5714 37.3839 22.5714H41.6161C42.004 22.5714 42.3214 22.8888 42.3214 23.2768V36.6786H55.7232C56.1112 36.6786 56.4286 36.996 56.4286 37.3839V41.6161Z" fill="#FF8500"/>
</svg>

I wanted to edit the property fill from within that <img> but directly from the css this way:

.menuimage:hover path{
   fill: #FF8500;
}

I researched and saw that I can do this with jQuerry, but I really want to do it without any external addition and without putting the svg right in the index. Is there any way?

javascript html css svg

  • No, it is not possible. After you add the SVG url inside img[src], the internal style cannot be changed. What can be done is to add the logic in the SVG code directly.

2 answers

1


That would be the way?:

.menuimage svg path:hover {
   fill: black;
}

.menuimage2 svg path:hover {
   fill: blue;
}
<div class="menuimage">
 <svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M39.5 0C17.6868 0 0 17.6868 0 39.5C0 61.3132 17.6868 79 39.5 79C61.3132 79 79 61.3132 79 39.5C79 17.6868 61.3132 0 39.5 0ZM56.4286 41.6161C56.4286 42.004 56.1112 42.3214 55.7232 42.3214H42.3214V55.7232C42.3214 56.1112 42.004 56.4286 41.6161 56.4286H37.3839C36.996 56.4286 36.6786 56.1112 36.6786 55.7232V42.3214H23.2768C22.8888 42.3214 22.5714 42.004 22.5714 41.6161V37.3839C22.5714 36.996 22.8888 36.6786 23.2768 36.6786H36.6786V23.2768C36.6786 22.8888 36.996 22.5714 37.3839 22.5714H41.6161C42.004 22.5714 42.3214 22.8888 42.3214 23.2768V36.6786H55.7232C56.1112 36.6786 56.4286 36.996 56.4286 37.3839V41.6161Z" fill="#FF8500"/>
 </svg>
</div>

<div class="menuimage2">
 <svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M39.5 0C17.6868 0 0 17.6868 0 39.5C0 61.3132 17.6868 79 39.5 79C61.3132 79 79 61.3132 79 39.5C79 17.6868 61.3132 0 39.5 0ZM56.4286 41.6161C56.4286 42.004 56.1112 42.3214 55.7232 42.3214H42.3214V55.7232C42.3214 56.1112 42.004 56.4286 41.6161 56.4286H37.3839C36.996 56.4286 36.6786 56.1112 36.6786 55.7232V42.3214H23.2768C22.8888 42.3214 22.5714 42.004 22.5714 41.6161V37.3839C22.5714 36.996 22.8888 36.6786 23.2768 36.6786H36.6786V23.2768C36.6786 22.8888 36.996 22.5714 37.3839 22.5714H41.6161C42.004 22.5714 42.3214 22.8888 42.3214 23.2768V36.6786H55.7232C56.1112 36.6786 56.4286 36.996 56.4286 37.3839V41.6161Z" fill="#FF8500"/>
 </svg>
</div>

You use <nome da classe> svg path:hover to change the color (fill) during the event Hover of each svg according to the class he of the element he is contained in.

For safety reasons, charge SVG within a tag img has some restrictions. See here.

  • I wouldn’t have a way to do that without putting the svg direct and yes with a <img src..>?

  • If I could give you some advice, I would .menuimage svg path:hover for .menuimage:hover svg path otherwise Hover only works on the orange part of the image and not on the whole button.

0

To filter to a specific color, see an example of this code in Codepen: https://codepen.io/sosuke/pen/Pjoqqp

Using the example of him:

the exit to #00EE00 is:

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

Add CSS filtering to this class.

.filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

SEE MORE ON: https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element#:~:text=You%20can’t%20change%20the,or%20using20%inline.

Browser other questions tagged javascript html css svg

You are not signed in. Login or sign up in order to post.