有没有办法将位图插入 svg 文件?
我找到了 tag <image>
,但是有了这样一个条目,一些对象被添加到 svg (它在inkscape中突出显示),但只是一个白色背景:
<image src="D:\project\хлам\image.png" height="79.375" width="79.375" />
我直接在编辑器中添加了一张图片(粘贴)如果我通过记事本打开 svg(一大堆字符),我会得到一张非常可怕的图片:
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAA3mklEQVR42uzcXYhMcRjHcReKG5Qr
JYplLUvZsKy3jYS4QIlahbznbUXLXkit9ZbVuuAGRcSV4kK2vRHtzVJkhfUyM2TJnNnZ2dmXmfG2
5vH8z56NKKzNzJ4z30/92qlpr57/+c05/zln+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...
在这种精神下还有 230 行。
问题的作者,假设使用标签
<image>
来添加位图,svg
是在正确的轨道上,但需要遵循。一张图片填满了 svg 的整个空间
为此,请选择
viewBox
等于位图大小的参数并将位图设置width
为height
100%style -
style="border:1px solid red;"
在svg文件的头文件中用来表示svg范围的边框一张图片占据了 svg 空间的 50%
该命令
preserveAspectRatio="xMinYMin meet"
将图像放在svg的左上角位图尺寸:
width="50%" height="50%"
现在可以将图像定位在 svg 空间内。
在 svg 文件中定位位图
为此,请使用命令 -
transform="translate(X Y)"
以 4 个相同的位图为例,将它们放在 svg 画布的角落。
将图像移动到右上角 -
transform="translate(540 0)"
将图像移动到右下角 -
transform="translate(540 450)"
每张图片单独缩放
width="25%"
height="25%"
通过改变标签中 图像( )的宽度和高度,<image>
我们得到不同的图像比例。transform="translate(600 0)"
,我们定位图像这些图片可以通过 直接访问
src="путь.."
。首先将其添加到图片文件夹,或添加到您存储所有图片的位置。作为一个例子,我附上一个插入上传到主机的图片的代码(顺便说一句,这很方便)。PS 如果你想直接在你的开发环境中打开一个 svg 图像,那么你可能需要特殊的插件来帮助你做到这一点。我也使用
Visual studio code
插件链接SVG Viewer
。来源:链接