SVG clipPath - 裁剪区域偏移和大小问题答案

【问题标题】：SVG clipPath - clipped area offset and size problemSVG clipPath - 裁剪区域偏移和大小问题
【发布时间】：2019-12-23 20:47:24
【问题描述】：

请看黄色矩形，这与裁剪图像的矩形完全相同。但是图像被剪裁得更小并向右移动。

图像只是一个元素，但想象一下其他几个元素都需要剪裁成黄色矩形的形状。

我知道我可以通过将<image> 元素（以及任何其他元素）包装在<g> 元素中并将clipPath 应用于此<g> 元素来解决此问题。

是否可以通过仅修改 clipPath 部分来解决此问题，而不触及 svg 结构的其余部分？

<defs>
    <clipPath id="clipPath">
        <path d="M150-750 L150,750 L-150,750 L-150,-750Z" transform="matrix(1,0,0,1,152.5,770.5)"></path>
    </clipPath>
</defs>

<path fill="#ffff00" d="M150-750 L150,750 L-150,750 L-150,-750Z" transform="matrix(1,0,0,1,152.5,770.5)"></path>

<image x="-1632" y="-1224" width="3264" height="2448" preserveAspectRatio="none"
       xlink:href="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg"
       transform="matrix(0.3529,0,0,0.3529,246.2554,998.5607)"
       style="clip-path: url(#clipPath);"></image>

请查看jsfiddle here。

【问题讨论】：

标签： svg clip clip-path

【解决方案1】：

一切都发生了，因为你用不同的值转换了路径和图像。我已经删除了转换并更改了 viewBox 值，以便剪切路径位于 svg 画布内。

我还删除了 svg 元素的高度，因为我想保持与 viewBox 相同的纵横比。

请看一看。让我知道这是否是您需要的。

<svg width="305" style="overflow: hidden; position: relative;"
     viewBox="-200 -800 750 3964" preserveAspectRatio="xMinYMin">
    <defs>
        <clipPath id="clipPath">
            <path id="test" d="M150-750 L150,750 L-150,750 L-150,-750Z" ></path>
        </clipPath>
    </defs>

    <use xlink:href="#test" fill="#ffff00" ></use>

    <image x="-1632" y="-1224" width="3264" height="2448" preserveAspectRatio="none"
           xlink:href="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg"
           
           style="clip-path: url(#clipPath);"></image>
</svg>

【讨论】：

在这种情况下，为什么要对剪切路径使用不同的转换？
“您的示例中标记的目的是什么”：您使用相同的路径两次。我没有重复自己，而是使用<use> 重用路径
“因为这些是由用户操作的 :) 因此，例如 4 个具有不同变换的不同元素需要由一个剪辑路径剪辑”在这种情况下，您的代码可以按预期工作
由于裁剪区域不正确，所以无法使用。它应该被剪裁成一个与剪贴路径相同的黄色矩形。
'在这种情况下，您的代码按预期工作'不，它没有