Question

我正在使用SVG，我将svg圆划分为六个相等的三角形，但是6,1个三角形之间的间隔未正确显示，我尝试更改路径d的值更改，但仍然不准确，有人可以建议我可以解决此问题的另一种方法。

.fg{
        fill: #4472c4;
        stroke: #FFFFFF;
        stroke-width: 5;
        transition: fill 0.3s ;
    }

<div class="circle">
    <svg width="800" height="800" class="tp-cir" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 v-100 a100,100 1 0,1 84.6025,50" />
            <text x="135" y="35" text-anchor="middle">1
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 l86,-50 a100,100 1 0,1 0,100" />
            <text x="170" y="98" text-anchor="middle">2
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 l86,50 a100,100 1 0,1 -86,50" />
            <text x="135" y="160" text-anchor="middle">3		
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 v100 a100,100 1 0,1 -86,-50" />
            <text x="60" y="155" text-anchor="middle">4
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc"  d="M100,100 l-86,50 a100,100 1 0,1 0,-100" />
            <text x="27.5" y="100" text-anchor="middle">5
            </text>
        </a>
        <a xlink:href="#"><path class="fg tpc" d="M100,100 l -87,-50 a100,100 1 0,1 84, -50" />
            <text x="60" y="35" text-anchor="middle">6
            </text>
        </a>
    </svg>
</div>

Answer 1

这就是我要做的。

我只绘制一次三角形并将其旋转所需的量

对于三角形之间的间隙，我使用遮罩；

我将文本和三角形归入同一<a>元素中。

请看看：

svg{border:1px solid; }
text{fill:white;text-anchor:middle;dominant-baseline:middle;pointer-events:none;}
a use{fill:blue}
a use:hover{fill:red}

<svg viewBox="-50 -50 100 100" width="300">
<defs>
<path id="sectorpath" d="M0,0 L38.97114317029974,-22.499999999999996 A45,45 0 0 1 38.97114317029974,22.499999999999996 L0,0 A0,0 0 0 0 0,0"></path>
<mask id="themask">
<use xlink:href="#sectorpath" style="stroke:#000; stroke-width:3; fill: #ffffff"></use>
</mask>
<use xlink:href="#sectorpath" id="sector" style="mask: url(#themask)"></use>
</defs>
<a xlink:href="#"><g>
  <use xlink:href="#sector" transform="rotate(-90)" ></use>
  <text x="0" y="-22.5">a</text>
</g>  
</a>
  
<a xlink:href="#"><g>
<use xlink:href="#sector" transform="rotate(-30)"></use>
<text x="19.48557158514987" y="-11.25">b</text>
</g>
</a>
  
  
  
<a xlink:href="#">
  <g>
  <use xlink:href="#sector" transform="rotate(30)"></use>
  <text x="19.48557158514987" y="11.249999999999996">c</text>
  </g>
</a>
  
  <a xlink:href="#">
  <use xlink:href="#sector" transform="rotate(90)"></use>
  <text x="1.3777276490407724e-15" y="22.5">d</text>
 
</a>


<a xlink:href="#">
  <use xlink:href="#sector" transform="rotate(150)"></use>
  <text x="-19.485571585149867" y="11.250000000000007">e</text>
</a>


<a xlink:href="#">
  <use xlink:href="#sector" transform="rotate(210)"></use>
  <text x="-19.485571585149877" y="-11.249999999999986">f</text>
</a>
  
  

</svg>

SVG圈子分为六个小方块

1 个答案: