可以在 svg 行中使用 calc() 吗？

Question

我不确定这是否是最佳方法。我正在尝试制作一个具有可缩放部分和固定部分的 SVG。它看起来像这样：

加载网页时，我不知道容器的高度是多少，但我知道宽度。我希望连接线根据高度进行缩放，但要使带有加号的框保持居中，如下所示：

我玩过 x1、y1 等的线设置，但我想不出不求助于 javascript 的方法。 SVG 不是最好的选择吗？这是我目前所拥有的：

<svg class="s2">
        <line x1="50%" y1="0" x2="50%" y2="10%" style="stroke:rgba(255,0,0,.9);stroke-width:1px;"></line> <!-- top joining line -->

        <g id="square" x="50%" y="50%" width="16px" height="16px">
            <line x1="5" y1="8" x2="11" y2="8" style="stroke:rgba(255,0,0,.9);stroke-width:1px;"></line> <!-- plus horizontal line -->
            <line x1="8" y1="5" x2="8" y2="11" style="stroke:rgba(255,0,0,.9);stroke-width:1px;"></line> <!-- plus vertical line -->

            <rect x="4" y="4" width="8" height="8" style="fill:transparent;stroke:rgba(0,0,0,.5);"></rect>
        </g>

        <line x1="50%" y1="90%" x2="50%" y2="100%" style="stroke:rgba(255,0,0,.9);stroke-width:1px;"></line> <!-- bottom joining line -->

        <line x1="90%" y1="50%" x2="100%" y2="50%" style="stroke:rgba(255,0,0,.9);stroke-width:1px;"></line> <!-- right joining line -->
    </svg>

javascript 是我唯一的选择吗？我尝试使用像

这样的值

calc(50% - 5px)

用于行定位，但貌似不支持。如果是这样就可以解决问题。

Answer 1

对于解决方案，您必须结合两种技术：

屏蔽部分线条，
将以像素为单位的定位与以百分比为单位的 CSS 翻译相结合

首先将您的矩形定位在坐标原点的中心，以像素为单位给出大小。首先从 -50% 到 +50% 不间断地简单绘制连接线。然后中央矩形后面的部分被屏蔽掉，尺寸再次以 px 为单位。

最后，transform:translate(50%, 50&) 移动所有内容以填充 SVG。需要注意的是，这是 CSS transform property that can have units, while the SVG transform presentation attribute 只能有无单位的数字。因此必须将其写入 style 属性（或样式表）。

#outermost {
    transform:translate(50%, 50%);
}
g line {
    stroke:rgba(255,0,0,.9);
    stroke-width:1px;
}
g rect {
     fill:none;
     stroke:rgba(0,0,0,.5);
}

<svg xmlns="http://www.w3.org/2000/svg" class="s2" width="24" height="100">
    <mask id="cp">
        <rect x="-50%" y="-50%" width="100%" height="100%" fill="white"></rect>
        <rect x="-6" y="-6" width="12" height="12" fill="black"></rect>
    </mask>
    <g id="outermost">
        <g mask="url(#cp)">
            <line x1="0" y1="-50%" x2="0" y2="50%"></line>
            <line x1="0" y1="0" x2="50%" y2="0"></line>
        </g>
        <line x1="-3" y1="0" x2="3" y2="0"></line>
        <line x1="0" y1="-3" x2="0" y2="3"></line>
        <rect x="-4" y="-4" width="8" height="8"></rect>
    </g>
</svg>

可以在 svg 行中使用 calc() 吗？

possible to use calc() in svg line?

scaling

svg