svg 畫圓

svg

mayyola 2018-06-25 14:42:24 ‧ 2293 瀏覽

分享至

各位大大您好:
想請問焦點講師外面紫色虛線圓跟實體圓是怎麼做出來的呢?
https://modernweb.tw/

我想說用svg畫圓，但是只要將座標xy跟r變動，就不能將圓顯示出來，會被切掉

我原本用CSS但查詢過後，虛線的間隔不能調整，所以使用svg

想請問要怎麼把圓放大，並在裡面加入圖片，感激不盡!

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
	 <g fill="none" stroke="black" stroke-width="2">
  <circle cx="300" cy="250" r="200" stroke-dasharray="10,15"/>
		   </g>
</svg>
 
</body>
</html>

ccutmis iT邦高手 2 級 ‧ 2018-06-27 17:13:42 檢舉

http://modernweb.tw/img/deco-speacker.svg

ccutmis iT邦高手 2 級 ‧ 2018-06-28 11:57:04 檢舉

<html>
<head>
<style>
*{box-sizing:border-box;}
body{background-color: #000;}
.speaker__imgbox{background:url(http://modernweb.tw/img/deco-speacker.svg);background-repeat:repeat-y;padding:30px;}
.speaker__imgbox img{border-radius:50%;display: block;max-width:100%;height:auto;margin-left: -10px;}
}
</style>
</head>
<body>
<div class="speaker__imgbox">
<img src="https://confapi.ithome.com.tw/sites/default/files/speaker_avatar/speaker01.jpg"/>
</div>
</body>
</html>

mayyola iT邦研究生 2 級 ‧ 2018-06-29 17:27:59 檢舉

謝謝!!!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Homura

iT邦高手 1 級 ‧ 2018-06-25 15:03:47

最佳解答

我想說用svg畫圓，但是只要將座標xy跟r變動，就不能將圓顯示出來，會被切掉

因為你的範圍是預設的太小了
所以你得把你SVG畫的範圍變大
然後圖片放在裡面就行了
x和y一樣是位置
viewBox是你的範圍大小

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">         
    <g fill="none" stroke="black" stroke-width="2">
        <circle cx="225" cy="105" r="50" stroke-dasharray="10,15"/> 
    </g>
    <image xlink:href="https://ithelp.ithome.com.tw/storage/image/logo.svg"/ x="225" y="105">
</svg>

回應 3
分享
檢舉

mayyola iT邦研究生 2 級 ‧ 2018-06-25 17:21:53 檢舉

h大謝謝~想再請問要怎麼把裡面的圖也變圓圈(我用CSS)不行..

<div class="teacher">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="400" >
	 <g fill="url(#image)" stroke="#C10066" stroke-width="2">
  <circle cx="340" cy="200" r="150" stroke-dasharray="10,15"/>
  </g>

 <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%"
             viewBox="0 0 512 512">
      <image x="10%" y="14%" width="400" height="400" xlink:href="./images/chiu.jpg"></image>
    </pattern>
  </defs>
   </svg>

</div>