How do I target each circle within svg using css?-CodePudding

I have this

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
<circle fill="#ffffff" cx="512" cy="512" r="110"></circle>
<circle stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>

How can I style each circle using css? Thank you.

CodePudding user response：

If you know that the SVG markup won't change, then this will suffice:

.wheel * {
  // CSS here
}

Otherwise, give the circles a class and write like:

.wheel .wheel-circle {
  // CSS here
}

If you mean each circle needs different styles then simply:

.wheel #wheel-circle-1 {
  // CSS here
}

.wheel #wheel-circle-2 {
  // CSS here
}

CodePudding user response：

Method 1:

The best way would be to add an id to each circle:

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
 <circle id="innerCircle" fill="#ffffff" cx="512" cy="512" r="110"></circle>
 <circle id="outerCircle" stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>

And then just target that.

#innerCircle {
  fill: red;
}

#outerCircle {
  stroke: blue;
}

Method 2:

But if this is not desirable, try using the nth-child selector on the parent:

.wheel:nth-child(1) {
   fill: red;
}

.wheel:nth-child(2) {
  stroke: blue;
}

I hope this helps!