各位大大好，想請問小叮噹圖片要如何剛好對到虛線圓圈中，不管響應式視窗調整或者是放大縮小圖片跟圈圈都可以等比例放大縮小(ctrl+滾輪)，如果用虛線用border是很方便的，但是他虛線的間距度無法調整..
https://jsfiddle.net/mtbw1hjz/6/
謝謝..
已邀請的邦友 {{ invite_list.length }}/5
剛才試了一下 你的原始SVG有些問題我作了一些改寫
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<g fill="none" stroke="#C10066" stroke-width="2">
<circle cx="250" cy="250" r="250" stroke-dasharray="10,15"/>
</g>
</svg>
存檔為circle.svg
底下是一小段簡化過的html碼，放大縮小圖跟虛線能跟著變動
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<style>
.teacherpic{
box-sizing:border-box;
min-height:300px;
background:url(circle.svg);
background-repeat:no-repeat;
padding:25px;
}
.teacherpic img{
height:250px;width:250px;
box-sizing:border-box;
border-radius:50%;
}
</style>
</head>
<body>
<div id="content">
<h1>介紹</h1>
<div class="teacherpic">
<img src="http://www.ee.nsysu.edu.tw/eelab2019/images/chiu.jpg"/></div>
</div>
</body>
</html>
demo url:
http://www.web3d.url.tw/svgCircleExam/
為了簡化問題，樓主原文裡很多css跟html我都拿掉了，希望這個範例對您有幫助。
svg跟html一樣，是結構性語法，多熟悉語法才能更好的去操控它。
直接在圖片上給虛線邊框
.teacherpic img{
border-radius:50%;
border:3px dashed red;
}
iThome鐵人賽
看影片追技術