Элемент изображения SVG <image>

Элемент <image> SVG используется для внедрения растровых изображений в SVG изображения. Таким образом, вы можете нарисовать над или около растрового изображения. Программное обеспечение для конвертации SVG изображений поддерживает форматы JPEG, PNG; в SVG, элемент image также может внедрять любые растровые изображения. В растровых изображениях, можно использовать фильтры, маски, повороты, обрезки и все другие инструменты SVG.

Пример SVG изображения

Это пример SVG изображения:

　　　　<svg width="500" height="160">
　　　　　　　　<rect x="10" y="10" height="130" width="500" style="fill: #000000"></rect>
　　　　　　　　<image x="20" y="20" width="300" height="80" xlink:href="/static/images/logo.png"></image>
　　　　</svg>
　　　　<svg>
　　　　　　　　<image x="20" y="20" xlink:href="/static/images/logo.png"></image>
　　　　　　　　<line x1="25" y1="80" x2="350" y2="80"></line>
　　　　</svg>

Эффект изображения после выполнения:

Сначала нарисуйте черный прямоугольник. Затем, моя эмблема нарисована в виде изображения в верхней части черного прямоугольника. В конце на верхней части моего изображения и черного прямоугольника нарисована белая линия.

Порядок вывода элементов SVG в файле соответствует порядку их рисования. Следующий элемент рисуется над предыдущим.

Вы также можете использовать элемент <image> для внедрения других изображений SVG. Это не обязательно должно быть растровое изображение.

Пример вращения изображения:

<svg width="500" height="160">
<image x="90" y="-65" width="100" height="146" transform="rotate(45)"
　　　　　xlink:href="/static/images/logo.png"/>
</svg>

Объяснение использования:

• width и height определяют ширину и высоту изображения.

• xlink:href определяет ссылку на изображение.

最终效果如下：