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

时间：2013-10-22 18:43:20

标签： html css canvas svg

在HTML5 Canvas中，您可以将图像作为一个整体绘制，或者只绘制一部分图像，或者只将一部分绘制到任意矩形（可以缩放它）。

以下是这三个例子：

enter image description here

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

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>元素的宽度和高度定义为较小时，您（看似）不能使用较大图像的剪切路径。 / p>

以上代码加上一个示例SVG元素：

http://jsfiddle.net/wcjVd/

1 个答案:

答案 0 :(得分：9)

您根本不需要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。

Demo Here

很高兴我可以在这里帮助你，因为几个月前你帮我做了一个Canvas项目！

修改

你说你也需要对它们进行改造，所以一小时后我想出了这些选项：

如果可以，请转换原始图像并执行相同的效果。 Demo here如果您希望裁剪的图片位于原点(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>

Demo for that approach here

相关问题
最新问题