Як встановити ширину обведення: 1 лише на певних сторонах SVG-фігур?

Встановлення ширини штриху: 1 на <rect>елементі в SVG розміщує штрих на кожній стороні прямокутника.

Як можна розмістити ширину обведення лише на трьох сторонах прямокутника SVG?

Відповіді:

166

Якщо вам потрібен штрих або відсутність обведення, тоді ви також можете використовувати для цього інсульт-dasharray , зробивши штрихи та прогалини збігатися зі сторонами прямокутника.

rect { fill: none; stroke: black; }
.top { stroke-dasharray: 0,50,150 }
.left { stroke-dasharray: 150,50 }
.bottom { stroke-dasharray: 100,50 }
.right { stroke-dasharray: 50,50,100 }

<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

Розгорніть фрагмент

Дивіться jsfiddle .

— Ерік Дальстрем
джерело

Як ми можемо показати обведення лише зверху прямого елемента?

— Суреш

Чи можете ви пояснити, чому певні числа в певних позиціях дають такий ефект?

— JacobIRR

@JacobIRR посилаються на визначення властивості 'stroke-dasharray' (посилання у відповіді). Ідея тут полягає в тому, щоб відповідати довжину тире сторонам прямокутника, а зазор між тире та стороною, яка не повинна мати ходу.

— Ерік

Я щойно оновив ваше рішення за цим посиланням codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

Ось програмне рішення, яке генерує stroke-dasharrayзаданий об’єкт, визначаючи, які межі слід показати. Читання коду може допомогти вам зрозуміти, як це працює: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

Ви не можете змінити візуальний стиль різних частин однієї фігури у SVG (відсутність ще не доступного модуля Векторні ефекти ). Натомість вам потрібно буде створити окремі фігури для кожного обведення чи іншого візуального стилю, який ви хочете змінити.

Для цього випадку, замість використання елемента <rect>або, <polygon>ви можете створити <path>або, <polyline>який охоплює лише три сторони прямокутника:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

Ви можете побачити ефект цих дій у дії тут: http://jsfiddle.net/b5FrF/3/

Червоний квадрат з обведенням з трьох боків

Для отримання додаткової інформації читайте про <polyline>більш потужні, але більш заплутані <path>форми.

— Фрогц
джерело

Ви можете використовувати полілінію для трьох обведених сторін, і просто взагалі не наносити штрих на прямокутник. Я не думаю, що SVG дозволяє застосовувати різні штрихи до різних частин контуру / фігури, тому вам потрібно використовувати кілька об’єктів, щоб отримати однаковий ефект.

— wdebeaum
джерело