Создание одной фигуры внутри другой

#svg

#svg

Вопрос:

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

Ответ №1:

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

Для прямоугольников используется тег <rect>. Взглянув на описание прямоугольника в спецификациях, вы можете увидеть, что модель содержимого не позволяет <rect> содержать другой <rect> (или shape).

Пример того, что вы можете сделать :

 <rect x="0" y="0" width="200" height="100"/>
<rect x="25" y="25" width="150" height="50"/>
  

Вы также можете добавить <g> вокруг этих двух прямоугольников, чтобы сгруппировать их, вот так :

 <g>
    <rect x="0" y="0" width="200" height="100"/>
    <rect x="25" y="25" width="150" height="50"/>
</g>
  

Дополнительные пояснения здесь : http://www.w3.org/TR/SVG/struct.html#Groups

У вас также есть альтернатива использования пути для рисования 2 прямоугольников только с одним тегом. Все зависит от ваших потребностей.

Комментарии:

1. @PradeepNeo <джи>