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在评论

悬停应该在g g：hover而不是g circle：hover

在这种情况下，我向g元素添加了一个矩形。矩形与g的边框一样大。 g元素中除rect之外的所有内容都具有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>

缩放svg组而不更改位置

1 个答案:

更新2