缩放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>