svg - рисовать полый прямоугольник (прямой пончик)?

Может ли кто-нибудь помочь мне с рисованием полого прямоугольника с svg БЕЗ использования любого js lib (например, Raphael)?
В основном это должна быть та же идея, что и «форма пончика», но прямоугольник.
что-то вроде этого:

введите описание изображения здесь

javascript,svg,

1

Ответов: 2


3 принят

Вот пример :

<svg viewBox="0 0 400 400" shape-rendering="crispEdges">
    <path d="M10,10h100v100h-100zM20,20v80h80v-80z" fill="yellow" stroke="black"/>
</svg>

6

Ну вот

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2624 1462" width="1312" height="736" id="svg2">

  <path d="M 80,112 l 528,0 0,528 -528,0 z m -64,-64.000003 656,0 0,656.000023 -656,0 z" fill="gold" stroke="black" fill-rule="evenodd" />

</svg>

Путь ветров в одном направлении снаружи, а другой внутри и правило заполнения контуров вырезает середину.

JavaScript, SVG,
Похожие вопросы