можно использовать calc () в строке SVG?

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 , которое может иметь единицы измерения, в то время как атрибут представления преобразования SVG может иметь только числа без единиц измерения. Поэтому он должен быть записан в атрибуте 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>