縮放svg組而不更改位置

Question

懸停時，我想增加元素組的大小。

我使用了transform: scale() CSS屬性，但是當我將鼠標懸停在其原始位置上時

 p { font-family: Lato; } #stops>g:hover { transform: scale(14); cursor: pointer; } 

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98"> <defs> <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style> </defs> <title>line</title> <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" /> <path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" /> <path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" /> <path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" /> <g id="stops"> <g id="g3670"> <circle class="cls-2" cx="129.24" cy="149.78" r="13.58" /> <text id="text3668" class="cls-3" transform="translate(120.84 114.12)">Station1</text> </g> <g id="g3700"> <circle class="cls-2" cx="248.91" cy="288.93" r="13.58" /> <text id="text3698" class="cls-3" transform="translate(284.5 239)">Station2</text> </g> <g id="g3750"> <circle class="cls-2" cx="366.75" cy="358.2" r="13.58" /> <text id="text3748" class="cls-3" transform="translate(134.96 379.59)">Station3</text> </g> </g> </svg> 

預期行為

我想在不更改其位置的情況下增加文本大小和樁號（並填充它）。

可以用css完成，但是如果我能推薦圖書館的話，因為我會在地鐵線上（火車環流）制作動畫，那就太好了

Answer 1

在下一個演示中，我將刪除文本中的轉換，並添加x和y屬性。 當您將鼠標懸停在圓圈上時，將發生轉換。 為了也轉換文本，我使用了以下選擇器： #stops g circle:hover + text

另外，您可以更改字體大小，而不是轉換文本。

 text{ font-family: Lato; font-size:16px; } #stops g circle:hover { transform: scale(2); transform-origin: 50% 50%; transform-box: fill-box; cursor: pointer; } #stops g circle:hover + text{ transform: scale(2); transform-origin: 0% 50%; transform-box: fill-box; cursor: pointer; pointer-events:none; } 

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98"> <defs> <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style> </defs> <title>line</title> <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" /> <path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" /> <path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" /> <path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" /> <g id="stops"> <g id="g3670"> <circle class="cls-2" cx="129.24" cy="149.78" r="13.58" /> <text id="text3668" class="cls-3" x="145" y="149.78" >Station1</text> </g> <g id="g3700"> <circle class="cls-2" cx="248.91" cy="288.93" r="13.58" /> <text id="text3698" class="cls-3" x="270" y="288.93">Station2</text> </g> <g id="g3750"> <circle class="cls-2" cx="366.75" cy="358.2" r="13.58" /> <text id="text3748" class="cls-3" x="385" y="358.2">Station3</text> </g> </g> </svg> 

OP評論

懸停應該在gg：hover上而不是g circle：hover

在這種情況下，我向g元素添加了一個矩形。 矩形與g的邊框一樣大。 除rect外，g元素中的所有內容都具有pointer-events:none 。 變換圍繞圓心發生。

 text{ font-family: Lato; font-size:16px; } g * {pointer-events:none;} g rect{pointer-events:all;} #stops g{transform: scale(1);} #stops g:hover { transform: scale(2); transform-origin: 129.24px 149.78px; cursor: pointer; } 

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98"> <defs> <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style> </defs> <title>line</title> <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" /> <path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" /> <path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" /> <path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" /> <g id="stops"> <g id="g3670"> <rect x="115" y="110" width="187" height="52" fill="none" /> <circle class="cls-2" cx="129.24" cy="149.78" r="13.58" /> <text id="text3668" class="cls-3" x="145" y="149.78" >Station1</text> </g> </g> </svg> 

為了計算<g>的邊界框，可以使用javascript和方法getBBox() 。

為了更好地了解會發生什么，請在<rect>添加填充

如果需要，可以保留文本轉換。

更新2

OP在評論：

你能用三個點舉一個例子嗎？

接下來是示例。 在這種情況下，我使用Javascript設置rect的大小以及每個組的transform-origin的值。 如果僅需要標記，則可以從檢查器復制它。 由於OP在此示例中表示他們希望保留文本轉換，因此文本保留轉換，而不是x和y屬性。

 let stops = document.querySelector("#stops"); // all the g elements in the stops let gs = stops.querySelectorAll("g"); // for each g in the gs gs.forEach(g=>{ // the rectangle in this g element let thisRect = g.querySelector("rect"); // the circle in this g element let thisCircle = g.querySelector("circle"); // the coords of the circle's center used for the transform-origin let x = thisCircle.getAttribute("cx"); let y = thisCircle.getAttribute("cy"); // the bounding box of the group let bb = g.getBBox(); // set the rect's attributes thisRect.setAttributeNS(null, "x", bb.x); thisRect.setAttributeNS(null, "y", bb.y); thisRect.setAttributeNS(null, "width", bb.width); thisRect.setAttributeNS(null, "height", bb.height); // set the value for the transform-origin for this group g.style.transformOrigin = `${x}px ${y}px`; }) 

 text{ font-family: Lato; font-size:16px; } g * {pointer-events:none;} g rect{pointer-events:all;} #stops g{transform: scale(1);cursor: pointer;} #stops g:hover { transform: scale(2); } 

 <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 775.43 469.98"> <defs> <style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style> </defs> <title>line</title> <path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" /> <path id="path8" class="cls-1" d="M329.35,215.87,449,355" transform="translate(-200.1 -66.09)" /> <path id="path9" class="cls-1" d="M449,355c41.53,51.11,96.22,63.08,117.9,69.28" transform="translate(-200.1 -66.09)" /> <path id="path10" class="cls-1" d="M566.86,424.29C655.43,460.48,977.38,391.48,973,536" transform="translate(-200.1 -66.09)" /> <g id="stops"> <g id="g3670"> <rect fill="none"/> <circle class="cls-2" cx="129.24" cy="149.78" r="13.58" /> <text id="text3668" class="cls-3" transform="translate(145 160)">Station1</text> </g> <g id="g3700"> <rect fill="none"/> <circle class="cls-2" cx="248.91" cy="288.93" r="13.58" /> <text id="text3698" class="cls-3" transform="translate(270 300)">Station2</text> </g> <g id="g3750"> <rect fill="none"/> <circle class="cls-2" cx="366.75" cy="358.2" r="13.58" /> <text id="text3748" class="cls-3" transform="translate(200 400)">Station3</text> </g> </g> </svg>