svg прямоугольник с радиусом, тире и матрицей

Question

Я пытаюсь создать прямоугольник в svg с границей/штрихом сверху и снизу и с закругленными углами с использованием радиуса (rx, ry). С помощью свойства css «dasharray: width, height» можно стилизовать только верхнюю и нижнюю границу с помощью рамки/штриха. Без радиуса это работает так, как ожидалось.

Однако, когда радиус добавлен, верхняя граница больше не начинается в верхнем левом углу прямоугольника. Я попытался исправить это поведение, используя свойство css property dash-offset, но похоже, что верхняя граница частично исчезает (хотя, похоже, она работает для нижней границы).

Любая помощь в том, как создать прямоугольник с радиусом и только верхнюю и нижнюю границу, очень ценится, как и некоторое понимание того, что происходит.

увидеть скрипку на: https://jsfiddle.net/Lus8ku7p/

<svg> 
    <rect x =10 y=10 id=a ></rect> 
    <rect x = 10 y=170 id=b class=round></rect> 
    <rect x=170 y=10 id=c ></rect> 
    <rect x=170 y=170 id=d class=round></rect> 
</svg> 
svg{ 
    width:400px; 
    height:400px 
} 
rect { 
    width: 150px; 
    height: 150px; 
    stroke-width:4px; 
    stroke:black; 
    fill:red; 
    stroke-dasharray: 150 150; 
} 
.round{ 
    rx:20px; 
    ry:20px; 
} 
#c, #d{ 
    stroke-dashoffset: 40px; 
} 

Answer 1

Для того, чтобы штриховые узоры, чтобы сделать то же во всех SVG рендереров, спецификация SVG определяет, где образец пунктира должен начинаться для всех форм. Including rectangles.

Для прямоугольника начальная точка находится в левом конце горизонтальной части верхней стороны прямоугольника. Поэтому, если есть закругленный угол, он находится в точке, где кривая соответствует прямой. Затем штриховка проходит вокруг прямоугольника по часовой стрелке.

Эта начальная точка является фактически туннелем или порталом, через который появляется штриховка и исчезает. Вы не можете изменить свое местоположение, вам просто нужно тщательно сконструировать свой тире с учетом этой начальной точки.

Вы не говорите, где именно, сколько округленного угла вы хотите включить в верхний ход, но я собираюсь предположить, что вы хотите включить всю кривую.

В вашем примере прямоугольник равен 150x150 с угловым радиусом 20. Назовем эти w, h и r.

Для правильного расчета рисунка пунктирной линии необходимо точно определить длины всех сторон и закругленные углы.

Верх и низ каждой длины (w - 2 * r) = 110. Позволяет называть это xlen.

Левая и правая стороны будут длиной (w - 2 * r) = 110. Назовем это ylen.

Каждый из закругленных углов будет длиной (PI * 2 * r)/4 = 31.416. Давайте назовем этому rlen

штриха версия 1

Мы могли бы сделать наш штрих вверх от различных длин рисунка, которые мы должны завершить окружность прямоугольника. То есть.

• Верх прямой (не включая левый угол): xlen + rlen = 141.416.
• Правый боковой зазор в схеме: ylen = 110.
• Нижняя сторона (включая оба угла: rlen + xlen + rlen = 172.832.
• Левый боковой зазор в шаблоне: ylen = 110.
• В верхнем левом углу: rlen = 31.416.

Таким образом, тире будет "141.416 110 172.832 110 31.416".

rect { 
 
    stroke-width: 4px; 
 
    stroke: black; 
 
    fill:red; 
 
    stroke-dasharray: 141.416 110 172.832 110 31.416; 
 
}

<svg width="400" height="400"> 
 
    <rect x="10" y="10" width="150" height="150" rx="20"/> 
 
</svg>

штриха версия 2

Другой, более простой, но менее очевидное решение, возможно, чтобы воспользоваться тем, что штриховые рисунки повторить. Объедините это с смещением тире, и мы можем сделать тире узор намного проще.

• Верх прямоугольника (включая оба угла): rlen + xlen + rlen = 172.832.
• Правый боковой зазор в схеме: ylen = 110.
• Затем повторите, чтобы сформировать нижнюю и левую стороны.

Таким образом, тире будет "172.832 110".

«Но подождите», вы можете сказать: «Это не будет работать, потому что рисунок будет сдвинут по часовой стрелке на длину закругленного угла. Ты прав.

rect { 
 
    stroke-width: 4px; 
 
    stroke: black; 
 
    fill:red; 
 
    stroke-dasharray: 172.832 110; 
 
}

<svg width="400" height="400"> 
 
    <rect x="10" y="10" width="150" height="150" rx="20"/> 
 
</svg>

Однако, если мы используем stroke-dashoffset сместить рисунок влево/против часовой стрелки, мы потеряем часть первого тира, но мы также будем «вытягивать» некоторые из следующего повтора черты рисунка назад через этот «портал» запуска/завершения. Это зависит от того, как штриховка является точной правой длиной. Вот почему мы были так осторожны, чтобы точно рассчитать все длины.

Spo Какое значение мы должны использовать для stroke-dashoffset? То, как работает смещение тире, заключается в том, что он определяет, как далеко в шаблоне мы должны начать рисовать. Так что это должно быть после длины закругленного угла, или 31.416.

Так что, если мы добавим, что мы получим:

rect { 
 
    stroke-width: 4px; 
 
    stroke: black; 
 
    fill:red; 
 
    stroke-dasharray: 172.832 110; 
 
    stroke-dashoffset: 31.416; 
 
}

<svg width="400" height="400"> 
 
    <rect x="10" y="10" width="150" height="150" rx="20"/> 
 
</svg>

Вы можете видеть, что если вы хотите, чтобы ваш образец пунктира для запуска и остановки в правильных местах, это возможно. Вам просто нужно точно рассчитать длины в тире.

Если вам нужен один и тот же рисунок на прямоугольнике других размеров, вам нужно пересчитать длины, используя формулы, которые я перечисляю в начале этого ответа.