SVG图像元素
时间:2020-01-09 10:44:24 来源:igfitidea点击:
SVG的<image>元素用于将位图图像嵌入SVG图像中。这样,我们可以在位图图像的上方或者旁边绘制。
SVG图片示例
这是一个SVGimage
示例:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="130" width="500" style="fill: #000000"/> <image x="20" y="20" width="300" height="80" xlink:href="http://Hyman.com/images/layout/top-bar-logo.png" /> <line x1="25" y1="80" x2="350" y2="80" style="stroke: #ffffff; stroke-width: 3;"/> </svg>
首先绘制一个黑色矩形。其次,我的徽标作为图像绘制在黑色矩形的顶部。最后,在我的图像和黑色矩形的顶部都绘制了一条白线。
SVG元素在文件中列出的顺序是它们绘制的顺序。较后的元素绘制在较早的元素之上。
我们也可以使用<image>元素嵌入其他SVG图像。它不必是位图图像。