Толщина круглого угла элемента пути SVG - PullRequest
Новая
       0

Толщина круглого угла элемента пути SVG

0 голосов
/ 23 октября 2018

Я пытаюсь создать прямоугольник с круглым углом, используя элемент path, но проблема в том, что у круглого угла больше обводки, чем у прямых линий.См. Приведенный ниже код для элемента пути. 

<svg width="596.8571428571429" height="403.48571428571427">
    <g class="cardBG" opacity="0.8">
        <path 
            d="M104,0
               h388.8571428571429
               a104,104 0 0 1 104,104
               v195.48571428571427
               v104
               h-104
               h-388.8571428571429
               h-104
               v-104
               v-195.48571428571427
               a104,104 0 0 1 104,-104z" fill="none" 
            stroke="#000000" stroke-width="12">
        </path>
    </g>
</svg>

jsfidle https://jsfiddle.net/w9s0e3fu/2/

Как я могу убедиться, что ширина штриха остается постоянной для всего пути?

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Я создал шаблон пути svg, который полностью соответствует вашим требованиям.

Описание:

m100 100: перейти к точке (100 100)

h200: нарисуйте горизонтальную линию 200px от того места, где мы находимся

a20,20 0 0 1 20,20: нарисуйте дугу с радиусом Xpx, радиусом Y 20px по часовой стрелке, до точки с 20pxразница в осях X и Y

v200: Нарисуйте вертикальную линию 200px от того места, где мы находимся

a20,20 0 0 1 -20,20: Нарисуйте дугу с радиусом X и Y 20px по часовой стрелке до точки с разницей в -20px по оси X и 20px по оси Y

h-200: Нарисуйте горизонталь -200pxлиния от того места, где мы находимся

a20,20 0 0 1 -20, -20: нарисуйте дугу с радиусом X и Y 20 пикселей по часовой стрелке до точки с разницей X в -20 пикселейи -20px разница по оси Y

v-200: проведите вертикальную линию -200px от того места, где мы находимся

a20,20 0 0 1 20,-20: нарисовать дугу с радиусом X и Y 20 пикселей по часовой стрелке до точки с разницей в 20 пикселейрента в X и разница в -20px по оси Y

z: закрыть путь 

<svg width="500" height="500">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#000000" stroke-width="10"/>
</svg> 


<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#000000" stroke-width="10"/>
</svg> 
 
</body>
</html>

Спасибо !!

0 голосов
/ 23 октября 2018

Ваш ход имеет правильного размера, но его обрезает область просмотра.Вы можете расширить область просмотра, добавив viewBox, который смещен к left и top на половину вашего stroke-width (то есть. 12/2=6), и имеет width иheight вашего пути, но включая две половины вашего stroke-width, которые отсутствуют (т. Е. 2*6=12): 

viewBox="-6 -6 609 416"


<svg width="597" height="404" viewBox="-6 -6 609 416">
    <g class="cardBG" opacity="0.8">
        <path 
            d="M104,0
               h388.8571428571429
               a104,104 0 0 1 104,104
               v195.48571428571427
               v104
               h-104
               h-388.8571428571429
               h-104
               v-104
               v-195.48571428571427
               a104,104 0 0 1 104,-104z" fill="none" 
            stroke="#000000" stroke-width="12">
        </path>
    </g>
</svg>

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

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

Нет похожих вопросов

...