SVG
Ломаная
Поиск…
Синтаксис
<polyline points="10,5 25,15 20,10" />
параметры
параметр | подробности |
---|---|
точки | Атрибут точек определяет список точек. Каждая точка определяется координатой ax и ay в пользовательской системе координат. |
Ход ширина | Ширина хода |
штрих-непрозрачность | Непрозрачность удара |
штрих-dasharray | (Необязательно) Определяет штрих-код для штриха |
штрих-linecap | (Необязательно) Указывает, должен ли конец строки быть скрытым, круглым или квадратным («butt» (по умолчанию) / «round» / «square») |
штрих-linejoin | (Необязательно) Определяет, как сегменты линии должны быть соединены - митированные, округлые или скошенные («митра» (по умолчанию) / «круглый» / «скос») |
штрих-miterlimit | (Необязательно) Определяет максимальный размер митра. Согласованные соединения, превышающие этот предел, преобразуются в коническое соединение. По умолчанию = "4" |
SVG, включая полилинию
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="10,5 25,15 20,10" />
</svg>
Полилинии с альтернативными линиями, линеями и митрами
<svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" />
<text x="320" y="20">Default drawing stroke</text>
<g transform="translate(0,150)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="2"/>
<text x="320" y="20">stroke-linecap="butt" (default)</text>
<text x="320" y="40">stroke-linejoin="miter"(default)</text>
<text x="320" y="60">stroke-miterlimit="2"</text>
</g>
<g transform="translate(0,300)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
<text x="320" y="20">stroke-linecap="round" </text>
<text x="320" y="40">stroke-linejoin="round" </text>
</g>
<g transform="translate(0,450)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="square" stroke-linejoin="bevel"/>
<text x="320" y="20">stroke-linecap="square"</text>
<text x="320" y="40">stroke-linejoin="bevel"</text>
</g>
</svg>
Результат
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow