Trouble styling the path element inside an SVG

Question

Trouble styling the path element inside an SVG

67 views Asked by devbams At 01 July 2023 at 17:56

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./svg.css" />
    <style>
      svg {
        width: 50px;
        height: 50px;
        transition: 0.5s;
        cursor: pointer;
      }
      #add:checked ~ label > svg > .circle {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="checkbox" id="add" />
      <label class="label" for="add">
        <svg
          width="800px"
          height="800px"
          viewBox="0 -0.5 25 25"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            class="circle"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M5.5 12.0002C5.50024 8.66068 7.85944 5.78639 11.1348 5.1351C14.4102 4.48382 17.6895 6.23693 18.9673 9.32231C20.2451 12.4077 19.1655 15.966 16.3887 17.8212C13.6119 19.6764 9.91127 19.3117 7.55 16.9502C6.23728 15.6373 5.49987 13.8568 5.5 12.0002Z"
            fill="green"
            stroke="#000000"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            class="plus"
            d="M9.875 11.2502C9.46079 11.2502 9.125 11.586 9.125 12.0002C9.125 12.4145 9.46079 12.7502 9.875 12.7502V11.2502ZM12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502V12.7502ZM12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502V11.2502ZM15.125 12.7502C15.5392 12.7502 15.875 12.4145 15.875 12.0002C15.875 11.586 15.5392 11.2502 15.125 11.2502V12.7502ZM13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002H13.25ZM11.75 14.6252C11.75 15.0395 12.0858 15.3752 12.5 15.3752C12.9142 15.3752 13.25 15.0395 13.25 14.6252H11.75ZM11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002H11.75ZM13.25 9.37524C13.25 8.96103 12.9142 8.62524 12.5 8.62524C12.0858 8.62524 11.75 8.96103 11.75 9.37524H13.25ZM9.875 12.7502H12.5V11.2502H9.875V12.7502ZM12.5 12.7502H15.125V11.2502H12.5V12.7502ZM11.75 12.0002V14.6252H13.25V12.0002H11.75ZM13.25 12.0002V9.37524H11.75V12.0002H13.25Z"
            fill="#fff"
          />
        </svg>
      </label>
    </div>
  </body>
</html>

I'm facing difficulties in applying styles to the path element inside an SVG. I have tried various CSS approaches, but the styles are not being applied as expected.

What I tried:

I attempted to use CSS selectors to target the path element directly, but the styles didn't take effect. I also tried adding classes to the path element and styling them using CSS, but it didn't work either. Expected outcome: I expected the styles applied to the path element to change its appearance, such as fill color, stroke color, and stroke width.

Original Q&A

There are 2 answers

**Muhammad Mujtaba** · Answer 1 · 2023-07-01 18:17:42

Muhammad Mujtaba On 01 July 2023 at 18:17

you may apply fill color like this

.plus{
        fill:red !important;
 
    }

**Dave Pritlove** · Answer 2 · 2023-07-01 22:03:52

Without specific examples of what attempts failed to apply styles, this may or may not help.

The mentioned properties of line widths and colors, and fill colours can be styled with css but have to be referenced bearing in mind the properties being targeted are svg attributes and not their html element counterparts.

For example, to set a line width, you change the stroke-width property, and a line color is specified by setting the stroke property to the color. Similarly content colors are set on the fill property.

The selectors for css rule blocks follow the same pattern as for html elements while making sure any tag types are referenced by their svg name.

Putting it all together, these rule blocks work on your example:

    path.circle {
      fill: yellow;
      stroke: blue;
      stroke-width: 0.5;
    }

      path.plus {
      fill: #0f0;
      stroke-width: 0.2;
      stroke: #f00;
    }

Working snippet follows. Please edit question if some other aspect was causing the problems you encountered.

svg {
width: 50%;
margin-top: -45%;
}

path.circle {
  fill: yellow;
  stroke: blue;
  stroke-width: 0.5;
}

path.plus {
  fill: #0f0;
  stroke-width: 0.2;
  stroke: #f00;
}

        <svg
          width="800px"
          height="800px"
          viewBox="0 -0.5 25 25"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >

        <path
            class="circle"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M5.5 12.0002C5.50024 8.66068 7.85944 5.78639 11.1348 5.1351C14.4102 4.48382 17.6895 6.23693 18.9673 9.32231C20.2451 12.4077 19.1655 15.966 16.3887 17.8212C13.6119 19.6764 9.91127 19.3117 7.55 16.9502C6.23728 15.6373 5.49987 13.8568 5.5 12.0002Z"
            fill="green"
            stroke="#000000"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            class="plus"
            d="M9.875 11.2502C9.46079 11.2502 9.125 11.586 9.125 12.0002C9.125 12.4145 9.46079 12.7502 9.875 12.7502V11.2502ZM12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502V12.7502ZM12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502V11.2502ZM15.125 12.7502C15.5392 12.7502 15.875 12.4145 15.875 12.0002C15.875 11.586 15.5392 11.2502 15.125 11.2502V12.7502ZM13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002H13.25ZM11.75 14.6252C11.75 15.0395 12.0858 15.3752 12.5 15.3752C12.9142 15.3752 13.25 15.0395 13.25 14.6252H11.75ZM11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002H11.75ZM13.25 9.37524C13.25 8.96103 12.9142 8.62524 12.5 8.62524C12.0858 8.62524 11.75 8.96103 11.75 9.37524H13.25ZM9.875 12.7502H12.5V11.2502H9.875V12.7502ZM12.5 12.7502H15.125V11.2502H12.5V12.7502ZM11.75 12.0002V14.6252H13.25V12.0002H11.75ZM13.25 12.0002V9.37524H11.75V12.0002H13.25Z"
            fill="#fff"
          />
        </svg>

TechQA.

Trouble styling the path element inside an SVG

There are 2 answers

Related Questions in CSS

Related Questions in SVG

Related Questions in STYLING

Related Questions in PATHELEMENT

Popular Questions

Popular Tags

Trending Questions