我正在制作一個時間軸組件：
“標記”（帶箭頭的圓圈）是一個帶有圓圈和路徑的組。
我希望能夠根據需要使用 JS (Angular) 移動標記以與其他白色圓圈重合，但是圓圈和路徑正在使用整個 SVG 左上角的定位——我似乎無法移動 X 位置標記組的。
如果我設定組的 X，里面的圖稿將保留在創建它的位置。
這可能在一個 SVG 檔案中嗎？我將如何創建一個標記，其中圓圈和路徑相對于組的左上角？
<svg
version="1.1"
id="timeline"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="250px"
viewBox="0 0 225 26"
>
<defs>
<filter id="markerShadow">
<feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="#000000" flood-opacity="0.5" />
</filter>
</defs>
<g id="seg3">
<path class="empty" d="M218,6h-70v14h70c3.9,0,7-3.1,7-7S221.9,6,218,6z" />
</g>
<g id="seg2">
<rect x="77" y="6" class="empty" width="71" height="14" />
</g>
<g id="seg1">
<path class="empty" d="M7,6c-3.9,0-7,3.1-7,7s3.1,7,7,7h70V6H7z" />
</g>
<circle id="dot4" class="dot" cx="218" cy="13" r="5" />
<circle id="dot3" class="dot" cx="148" cy="13" r="5" />
<circle id="dot2" class="dot" cx="78" cy="13" r="5" />
<circle id="dot1" class="dot" cx="7" cy="13" r="5" />
<g id="marker">
<circle class="progress marker" cx="148" cy="13" r="10" style="filter: url(#markerShadow)" />
<polygon class="arrow" points="146.5,18.1 145.1,16.7 149.1,12.5 145.1,8.7 146.5,7.3 151.9,12.5 " />
</g>
</svg>
uj5u.com熱心網友回復：
我把標記放在<defs>確保它的中心在 0,0 點。為此，我正在翻譯該組transform="translate( -148, -13)"
現在我可以將組與<use>. use 元素可以采用 ax 和 y 屬性。您可以將 x 和 y 的值設定為與點的 cx 和 cy 一致。
circle{fill:gold}<svg
id="timeline"
width="250px"
viewBox="0 0 230 26"
>
<defs>
<filter id="markerShadow">
<feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="#0000ff" flood-opacity="0.5" />
</filter>
<g id="marker" transform="translate( -148, -13)">
<circle class="progress marker" cx="148" cy="13" r="10" style="filter: url(#markerShadow)" />
<polygon class="arrow" points="146.5,18.1 145.1,16.7 149.1,12.5 145.1,8.7 146.5,7.3 151.9,12.5" fill="white" />
</g>
</defs>
<g id="seg3">
<path class="empty" d="M218,6h-70v14h70c3.9,0,7-3.1,7-7S221.9,6,218,6z" />
</g>
<g id="seg2">
<rect x="77" y="6" class="empty" width="71" height="14" />
</g>
<g id="seg1">
<path class="empty" d="M7,6c-3.9,0-7,3.1-7,7s3.1,7,7,7h70V6H7z" />
</g>
<circle id="dot4" class="dot" cx="218" cy="13" r="5" />
<circle id="dot3" class="dot" cx="148" cy="13" r="5" />
<circle id="dot2" class="dot" cx="78" cy="13" r="5" />
<circle id="dot1" class="dot" cx="7" cy="13" r="5" />
<use xlink:href="#marker" x="218" y="13" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359346.html
標籤：javascript svg
下一篇：如何僅將懸停應用于X而不是圓圈