iT邦幫忙

0

svg 畫圓

svg

各位大大您好:
想請問焦點講師外面紫色虛線圓跟實體圓是怎麼做出來的呢?
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邦高手 8 級 ‧ 2018-06-27 17:13:42 檢舉
http://modernweb.tw/img/deco-speacker.svg
ccutmis iT邦高手 8 級 ‧ 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 檢舉
謝謝!!!

1 個回答

1
Homura
iT邦高手 1 級 ‧ 2018-06-25 15:03:47
最佳解答

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

因為你的範圍是預設的太小了
所以你得把你SVG畫的範圍變大
然後圖片放在裡面就行了
xy一樣是位置
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>
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>

Homura iT邦高手 1 級 ‧ 2018-06-25 17:56:46 檢舉
Homura iT邦高手 1 級 ‧ 2018-06-25 18:02:10 檢舉

我要發表回答

立即登入回答