主页 / 问题 / 869974
Accepted
ioprst
Asked:2020-08-17 21:39:42 +0000 UTC2020-08-17 21:39:42 +0000 UTC

将位图添加到 svg [重复]

  • 772

有没有办法将位图插入 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 行。

svg

2 个回答

  1. Best Answer

    问题的作者，假设使用标签<image>来添加位图，svg是在正确的轨道上，但需要遵循。

    一张图片填满了 svg 的整个空间

    为此，请选择viewBox等于位图大小的参数并将位图设置width为height100%

    style -style="border:1px solid red;"在svg文件的头文件中用来表示svg范围的边框 

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1080" height="900" viewBox="0 0 1080 900" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >  
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" width="100%" height="100%" />
</svg>

    一张图片占据了 svg 空间的 50%

    该命令 preserveAspectRatio="xMinYMin meet"将图像放在svg的左上角

    位图尺寸：width="50%" height="50%"

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1080" height="900" viewBox="0 0 1080 900" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >  
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" width="50%" height="50%" />
</svg>

    现在可以将图像定位在 svg 空间内。

    在 svg 文件中定位位图

    为此，请使用命令 - transform="translate(X Y)"

    以 4 个相同的位图为例，将它们放在 svg 画布的角落。

    将图像移动到右上角 -transform="translate(540 0)"
    将图像移动到右下角 -transform="translate(540 450)" 

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1080" height="900" viewBox="0 0 1080 900" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >  
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" width="50%" height="50%" />
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" transform="translate(540 0)" width="50%" height="50%" /> 
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" transform="translate(0 450)" width="50%" height="50%" /> 
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" transform="translate(540 450)" width="50%" height="50%" />
</svg>

    每张图片单独缩放

    • width="25%" height="25%"通过改变标签中 图像（ ）的宽度和高度，<image>我们得到不同的图像比例。
    • 使用命令transform="translate(600 0)"，我们定位图像 

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1080" height="900" viewBox="0 0 1080 900" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;" >  
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" width="50%" height="50%" />
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" transform="translate(600 0)" width="25%" height="25%" /> 
<image xlink:href="https://isstatic.askoverflow.dev/N1DGN.png" transform="translate(900 0)" width="12.5%" height="12.5%" />

</svg>

    • 3

  2. 这些图片可以通过 直接访问 src="путь.."。首先将其添加到图片文件夹，或添加到您存储所有图片的位置。作为一个例子，我附上一个插入上传到主机的图片的代码（顺便说一句，这很方便）。

    PS 如果你想直接在你的开发环境中打开一个 svg 图像，那么你可能需要特殊的插件来帮助你做到这一点。我也使用Visual studio code插件链接SVG Viewer。

    .papa {
  width: 250px;
}

.mama {
  width: 100px;
}

.baby {
  width: 50px;
}

img {
  vertical-align: top;
}

body {
  padding: 20px;
}
    <img class="papa" src="https://s.cdpn.io/3/kiwi.svg">

<img class="mama" src="https://s.cdpn.io/3/kiwi.svg">

<img class="baby" src="https://s.cdpn.io/3/kiwi.svg">

    来源：链接

    • 0

相关问题