5

在 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/

4

1 回答 1

9

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

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

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

在这里演示

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

编辑

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

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

<defs>
    <clipPath id="myClip">
        <rect x="0" y="0" width="70" height="70"/>
    </clipPath>
</defs>
     <image x="-50" y="-50" width="200" height="200" 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" width="70" height="70"/>
    </clipPath>         
</defs>
<image id="myImage" x="0" y="0" width="200" height="200" 
       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" width="200" height="200" style="fill:white" />

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

该方法的演示here

于 2013-10-22T22:16:42.113 回答