可以在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

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

• 掩盖部分线条和
• 将px中的定位与CSS翻译的百分比结合起来

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

最后，transform:translate(50%, 50&)移动所有内容以填充SVG。重要的是要注意，这是CSS transform property可以有单位，而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>