Как нарисовать прямоугольник внутри прямоугольника с помощью svg?

Я пытаюсь нарисовать прямоугольник внутри прямоугольника с помощью SVG, но я не вижу внутренний прямоугольник. Может ли кто-нибудь помочь мне, в чем ошибка, которую я делаю ?? Код, как показано ниже.

<html>
    <body>
        <h1>My first SVG</h1>
        <svg width="700" height="200">
            <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)">
                 <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
            </rect>
        </svg>
    </body>
</html>

спасибо заранее

9
html rectangles svg

2 ответов

просто нарисуйте прямоугольник поверх другой: Они будут нарисованы в том же порядке, в каком вы пишете в своем коде.

<html>
    <body>
        <h1>My first SVG</h1>
        <svg width="700" height="200">
            <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
            <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
        </svg>
    </body>
</html>
8

попробуйте этот код

    <svg width="700" height="200">
        <rect height="100" width="200"stroke-width:1 stroke:rgb(0,0,0)"></rect>
        <rect height="50" width="100" style="fill:rgb(242,242,242);stroke-width:1;stroke:rgb(0,0,0)</rect>
    </svg>

Примечание: он будет рисовать перекрывающиеся прямоугольники, поскольку вы поддерживаете порядок rect.

0