像在 HTML Canvas 或 CSS 中一样为 SVG <image> 定义源矩形

Posted 2023-03-06

【中文标题】像在 HTML Canvas 或 CSS 中一样为 SVG <image> 定义源矩形

【英文标题】：Define a source rectangle for an SVG <image> like you can in HTML Canvas or CSS

【发布时间】：2013-10-31 19:02:06

【问题描述】：

在 html5 Canvas 中，您可以将图像作为一个整体进行绘制，或者仅绘制其中的一部分，或者仅将其中的一部分绘制到任意矩形（可以缩放）。

以下是所有三个的示例：

这是用于绘制这三个示例的代码：

ctx.drawImage(img, 0, 0);

ctx.drawImage(img,
              // source rect
              50, 50, 70, 70,
              // destination rect
              0, 200, 70, 70
             );

ctx.drawImage(img,
              // source rect
              50, 50, 70, 70,
              // destination rect
              0, 270, 30, 30
             );

这在 CSS 中也比较容易做到。

我的问题是，对于给定的图像，如何使用 SVG <image> 元素实现相同的效果？

例如，我如何制作一个 50x50 像素的图像，以显示引用的 href 的一部分，就像在第一次裁剪中一样？

可以使用剪切路径来剪切图像的一部分，但是在将<image> 元素的宽度和高度定义为较小时，您（似乎）不能使用较大图像的剪切路径。

这是上面代码加上一个示例 SVG 元素的一个小技巧：

http://jsfiddle.net/wcjVd/

【参考方案1】：

你根本不需要clipPath，你可以使用viewBox来做你想做的事

<svg   viewBox="50 50 70 70">    
    <image x="0" y="0"   
        xlink:href="http://placekitten.com/200/200" clip-path="url(#myClip)">
    </image>
</svg>

viewBox 属性的值是一个由四个数字组成的列表：<min-x>、<min-y>、<width> 和 <height>，由空格和/或逗号分隔，它们指定了用户空间中的一个矩形应映射到给定元素建立的视口边界，同时考虑属性preserveAspectRatio。

Demo Here

很高兴我能在这里为您提供帮助，因为您在几个月前帮助我完成了一个 Canvas 项目！

编辑

你说你也需要改造它们，所以一个小时后我想出了以下几个选项：

如果可以的话，转换原始图像并做同样的效果。 Demo here 如果您想要在原点 (0,0) 裁剪图像，那么代码将如下所示

<defs>
    <clipPath id="myClip">
        <rect x="0" y="0"  />
    </clipPath>
</defs>
     <image x="-50" y="-50"   clip-path="url(#myClip)" 
            xlink:href="http://placekitten.com/200/200"></image>

或者，更令人满意的是，您可以使用use

<defs> <!-- Your original clip -->
    <clipPath id="myClip">
        <rect x="50" y="50"  />
    </clipPath>         
</defs>
<image id="myImage" x="0" y="0"   
       xlink:href="http://placekitten.com/200/200" clip-path="url(#myClip)" />

<!-- Hide the original (I made a layer of white) -->
<!-- This is the part that you could probably find a better way of doing -->
<rect x="0" y="0"   style="fill:white" />

<!-- Create what you want how you want where you want it -->
<use  x="-50" y="-50"   xlink:href="#myImage" transform="scale(1.3)"/>
</svg>

Demo for that approach here

【讨论】：

谢谢扎克！这不适用于我的情况（我也需要对它们进行转换），但这是一个非常优雅的解决方案，并且可能是大多数在 *** 上寻找此 Q 的人所需要的，因此我将其标记为已接受。

@SimonSarris 我用其他几个选项更新了我的答案，您可以使用它们来代替

我最终得到的通用解决方案涉及一个clipPath + 3个转换，你可以在这里看到一个例子：jsfiddle.net/rn7Ky

这是我添加的第一个选项（：