如何改变圆的大小在svg？ [英] How to change the size of circle in svg?

问题描述

这里是我的jsfiddle：小提琴

现在我需要减小Greeb色圈的大小，并增加红圈的高度。

$ b

$ c>< svg width =500height =500viewBox = - 2 -2 202 203shape-rendering =geometricPrecision>
< a xlink：href =＃>< path class =fragd =M100,100 v-100 a100,100 1 0,1 86.6025,50/>< text x =135y =42.5text-anchor =middle> Endorsements< / text>< / a>
< a xlink：href =＃>< path class =fragd =M100,100 l86.6025，-50 a100,100 1 0,1 0,100/& text x =170y =105text-anchor =middle>个人生活< / text>< / a>
< a xlink：href =＃>< path class =fragd =M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50/> < text x =135y =170text-anchor =middle>我访问的地点< / text>< / a>
< a xlink：href =＃>< path class =fragd =M100,100 v100 a100,100 1 0,1 -86.6025，-50/>< text x =65y =170text-anchor =middle> Academy< / text>< / a>
< a xlink：href =＃>< path class =fragd =M100,100 l-86.6025,50 a100,100 1 0,1 0，-100/> < text x =27.5y =105text-anchor =middle> awards< / text>< / a>
< a xlink：href =＃>< path class =fragd =M100,100 l-86.6025，-50 a100,100 1 0,1 86.0025，-50/> ;< text x =65y =42.5text-anchor =middle>职业概述< / text>< / a&
< a xlink：href =＃>< path class =centerd =M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0， -100/>< / a>
< / svg>

我可以知道如何做这个吗？

这是我第一次使用svg。

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

解决方案

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

我改变了红圈路径，<$ c $

 < c>< circle>  a xlink：href =＃> 
< circle cx =100cy =100r =70stroke =redstroke-width =3fill =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 =500height =500viewBox = -  2 -2 202 203shape-rendering =geometryPrecision> < a xlink：href =＃> < path class =fragd =M100,100 v-100 a100,100 1 0,1 86.6025,50/> < text x =135y = -  60.5text-anchor =middleclass ='mid-up-right'> Endorsements< / text& < / a> < a xlink：href =＃> < path class =fragd =M100,100 l86.6025，-50 a100,100 1 0,1 0,100/> < text x =185y =105text-anchor =middle>个人生活< / text> < / a> < a xlink：href =＃> < path class =fragd =M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50/> < text x =50y =222text-anchor =middleclass ='mid-down-right'>我访问的地点< / text& < / a> < a xlink：href =＃> < path class =fragd =M100,100 v100 a100,100 1 0,1 -86.6025，-50/> < text x =145y =108text-anchor =middleclass ='mid-down-left'> Academy< / text> < / a> < a xlink：href =＃> < path class =fragd =M100,100 l-86.6025,50 a100,100 1 0,1 0，-100/> < text x =15y =105text-anchor =middle> awards< / text> < / a> < a xlink：href =＃> < path class =fragd =M100,100 l-86.6025，-50 a100,100 1 0,1 86.0025，-50/> < text x =25y =60.5text-anchor =middleclass ='mid-up-left'>职业概述< / text& < / a> < a xlink：href =＃> < circle cx =100cy =100r =70stroke =redstroke-width =3fill =red/> < / a>< / svg>  

。

Here is my jsfiddle: Fiddle

Now i need reduce the size of Greeb color circle and also increase the height of red circle. And also rotate the text inside each part of big circle.

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>

May i know, how to do this one?

This is the first time i am using svg.

Can anybody help me to fix this? Thanks in advance.

解决方案

see this: http://jsfiddle.net/q611wenr/2/

I have changed the red circle path with, <circle>, and a rotation transform for text does the job.

<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>

Hope this helps.

这篇关于如何改变圆的大小在svg？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！