Question

这是我的jsfiddle：Fiddle

现在我需要减小Greeb色圈的大小并增加红色圆圈的高度。并且还可以在大圆圈的每个部分内旋转文本。

HTML：

<svg width="500" height="500" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">Endorsements</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">personal life</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">Place I am visited</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">Academy</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">awards</text></a>
  <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">Career Overview</text></a>
  <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a>
</svg>

我可以知道，怎么做这个？

这是我第一次使用svg。

有人可以帮我解决这个问题吗？提前谢谢。

Answer 1

请参阅：http://jsfiddle.net/q611wenr/2/

我已使用<circle>更改了红色圆圈路径，并且文本的旋转变换可以完成工作。

<a xlink:href="#">
    <circle cx="100" cy="100" r="70" stroke="red" stroke-width="3" fill="red" />
    </a>

.frag {
  fill: green;
  stroke: #FFFFFF;
  transition: fill 0.3s;
}
.center {
  fill: red;
  width: 50%;
}
a:hover .frag {
  fill: #FFC722;
}
text {
  font-size: 5px;
  fill: #fff;
}
.mid-up-left {
  -ms-transform: rotate(-38deg);
  -webkit-transform: rotate(-38deg);
  transform: rotate(-38deg);
}
.mid-up-right {
  -ms-transform: rotate(38deg);
  -webkit-transform: rotate(38deg);
  transform: rotate(38deg);
}
.mid-down-left {
  -ms-transform: rotate(38deg);
  -webkit-transform: rotate(38deg);
  transform: rotate(38deg);
}
.mid-down-right {
  -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

<svg width="500" height="500" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <a xlink:href="#">
    <path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" />
    <text x="135" y="-60.5" text-anchor="middle" class='mid-up-right'>Endorsements</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" />
    <text x="185" y="105" text-anchor="middle">personal life</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" />
    <text x="50" y="222" text-anchor="middle" class='mid-down-right'>Place I am visited</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" />
    <text x="145" y="108" text-anchor="middle" class='mid-down-left'>Academy</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" />
    <text x="15" y="105" text-anchor="middle">awards</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" />
    <text x="25" y="60.5" text-anchor="middle" class='mid-up-left'>Career Overview</text>
  </a>
  <a xlink:href="#">
    <circle cx="100" cy="100" r="70" stroke="red" stroke-width="3" fill="red" />
  </a>
</svg>

希望这有帮助。

如何在svg中更改圆的大小？

1 个答案: