how do I target the SVG circle in order to align it horizontally to page-CodePudding

I have this code:

<div >
      <svg width="100%" height="300" fill="black" stroke="#9966cc" stroke-width="20" stroke-linecap="round">
      <circle  transform="rotate(150 200 200)" cy="120" r="120" pathLength="170"/>
      </svg>
</div>

How do I target the just the "myCircle" class in CSS in order to change its properties (align it to center page...?

CodePudding user response：

.myCircle{
display:flex;
justify-content:center;
}

CodePudding user response：

Here I hare two examples of placing the circle centered. In both cases the <circle> is centered in the SVG by setting cx and cy to 50%.

In the first example I use the viewBox attribute on <svg> to control the "aspect-ratio". It will always take up 100% in width, so the height will depend on the width.

In the second the circle takes up the entire space of the SVG and the size is controlled by the height attribute on <svg>. And then the SVG is part of a flex-box where the content is centered.

<div >
  <svg viewBox="0 0 1000 260" fill="black" stroke="#9966cc" stroke-width="20" stroke-linecap="round">
    <circle  cx="50%" cy="50%" r="120" pathLength="170"/>
  </svg>
</div>

<div  style="display:flex;justify-content:center;">
  <svg viewBox="0 0 260 260" height="300" fill="black" stroke="#9966cc" stroke-width="20" stroke-linecap="round">
    <circle  cx="50%" cy="50%" r="120" pathLength="170"/>
  </svg>
</div>