主页 / 问题 / 1333538
Accepted
Denis
Asked:2022-09-30 01:59:29 +0800 CST2022-09-30 01:59:29 +0800 CST

如何将图像插入 SVG？

  • 772

这是布局：

在此处输入图像描述

这是不起作用的svg代码。

<svg width="727" height="620" viewBox="0 0 727 620" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#pattern0)"/>
<path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#paint0_linear)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.134532) scale(0.000927721 0.00108783)"/>
</pattern>
<linearGradient id="paint0_linear" x1="711" y1="620" x2="363.5" y2="620" gradientUnits="userSpaceOnUse">
<stop stop-color="#0B1424"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<image id="image0" width="1080" height="1080" src="https://cdn2.unrealengine.com/kena-keyart-1200x1600-1200x1600-3cc88c815329.png?h=854&resize=1&w=640" />
</defs>
</svg>

也就是说，您需要能够插入任何图像。并且右上角应该被剪掉。请告诉我我的错误在哪里。

html

5 个回答

  1. 请告诉我我的错误在哪里。

    使用标签添加图像时，您需要<image>使用src=href=

    <svg width="727" height="620" viewBox="0 0 727 620" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#pattern0)"/>
<path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#paint0_linear)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.134532) scale(0.000927721 0.00108783)"/>
</pattern>
<linearGradient id="paint0_linear" x1="711" y1="620" x2="363.5" y2="620" gradientUnits="userSpaceOnUse">
<stop stop-color="#0B1424"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<image id="image0" width="1080" height="1080" href="https://cdn2.unrealengine.com/kena-keyart-1200x1600-1200x1600-3cc88c815329.png?h=854&resize=1&w=640" />
</defs>
</svg>

    • clipPath
      使用响应性添加图像width="75%" height="75%"

    <svg width="75%" height="75%" viewBox="0 0 727 620" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cp">
<path transform="translate(-100)" d="M533.771 0H0V620H727V247.5L533.771 0Z" />
</clipPath>
</defs>
<image clip-path="url(#cp)"  id="image0" width="100%" height="100%" href="https://isstatic.askoverflow.dev/6lNYF.png" /> 
</svg>

    • 添加带蒙版的图像

    <svg  width="75%" viewBox="0 0 727 620" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="cp">
<path fill="white" transform="translate(-100)" d="M533.771 0H0V620H727V247.5L533.771 0Z" />
</mask>
</defs>
<image mask="url(#cp)"  id="image0" width="100%" height="100%" href="https://isstatic.askoverflow.dev/6lNYF.png" /> 
</svg>

    • 4

  2. 图像的链接包含 svg 标签中不允许的字符 - &、<、>

    <image id="image0" width="1080" height="1080" src="https://cdn2.unrealengine.com/kena-keyart-1200x1600-1200x1600-3cc88c815329.png?h=854&resize=1&w=640" />

    如果将链接中的 & 替换为 %26 HTML URL Encoding Reference则一切正常

    https://cdn2.unrealengine.com/kena-keyart-1200x1600-1200x1600-3cc88c815329.png?h=854%26resize=1%26w=640

    最终的 svg 如下所示：

    <svg width="727" height="620" viewBox="0 0 727 620" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#pattern0)"/>
    <path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#paint0_linear)"/>
    <defs>
        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use href="#image0" transform="translate(0 -0.134532) scale(0.000927721 0.00108783)"/>
        </pattern>
        <linearGradient id="paint0_linear" x1="711" y1="620" x2="363.5" y2="620" gradientUnits="userSpaceOnUse">
            <stop stop-color="#0B1424"/>
            <stop offset="1" stop-opacity="0"/>
        </linearGradient>
        <image id="image0" width="1080" height="1080" href="https://cdn2.unrealengine.com/kena-keyart-1200x1600-1200x1600-3cc88c815329.png?h=854%26resize=1%26w=640" />
    </defs>
</svg>

    *代码编辑器，如 IntelliJ 或伟大的免费编辑器 VSCode 将立即显示错误所在

    代码编辑器

    • 3
  3. Best Answer

    对于此类修剪，您可以将其clip-path与calc().

    裁剪右上角（60px 腿）的示例：

    body{
  margin: 0;
  background: #cda;
}
img{
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%);
}
    <img src="https://www.placecage.com/c/300/200" alt=""/>

    • 3

  4. 您可以使用画布：

    const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.src = "https://cdn2.unrealengine.com/kena-keyart-1200x1600-1200x1600-3cc88c815329.png?h=854&resize=1&w=640";
image.onload = () => {
    const w = canvas.width = image.width;
    const h = canvas.height = image.height;
    const path = new Path2D(`M ${w*2/3} 0 L ${w} ${w/3} V ${h} H 0 V 0 z`);
    ctx.clip(path);
    ctx.drawImage(image,0,0);
}
    <canvas></canvas>

    • 2

  5. 为了使应用程序看起来一对一，就像在给定的布局上一样，具有自适应性，并且布局不会以不同的分辨率为不同的小工具移动，并且您不必手动调整大小scale() translate()并用渐变填充空隙，我建议使用矢量编辑器的简单技术，只需点击几下鼠标

    1. 将模板加载到矢量编辑器中，并使用“绘制贝塞尔曲线”工具shift+F6沿图像轮廓绘制锚点：

    在此处输入图像描述

    1. 将文件保存为 *.svg 格式
    2. 使用SVGOMG对其进行优化
    3. 接下来，使用生成的路径使用clipPath、蒙版裁剪图像

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" id="svg4" width="75%" height="75%" viewBox="0 0 727 620">
<defs>
<clipPath id="cp">
<path  d="m0 0 535 0 191 246 0 372H0Z" />
</clipPath>
</defs> 
 <image clip-path="url(#cp)" xlink:href="https://isstatic.askoverflow.dev/ZKnFL.png" id="image2" height="100%" width="100%"/>
</svg>

    • 2

相关问题