Question

从图像中剪切角落
图像具有不同的宽高比
如果我在缩放斜率之后使用clipPathUnits="objectBoundingBox" 变化。
问题：如何剪切具有相同斜率的不同图像？可以为所有人重用一个clip-path定义吗？

Answer 1

您确实应该在问题中描述问题的详细信息，而不是外部网站。我希望我的问题是对的。

由于你想给你的图片的顶部和底部一个斜率，如何用一个非常大的三角形一个接一个地剪切它们（适用于剪切内容2000的最大高度）：

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="200">
  <defs>
    <clipPath id="clip">
      <polygon points="0,2000 12000,2000 0,0"  />
    </clipPath>  
  </defs>
  <g transform="translate(50 20)">
    <g clip-path="url(#clip)" transform="matrix(1 0 0 -1 0 120)">
      <g clip-path="url(#clip)" transform="matrix(-1 0 0 -1 90 120)">
        <rect width="90" height="120" transform="matrix(-1 0 0 1 90 0)" />
      </g>
    </g>
    <text y="170" font-size="12">90 x 120</text>
  </g>
  <g transform="translate(200 20)">
    <g clip-path="url(#clip)" transform="matrix(1 0 0 -1 0 120)">
      <g clip-path="url(#clip)" transform="matrix(-1 0 0 -1 120 120)">
        <rect width="120" height="120" transform="matrix(-1 0 0 1 120 0)" />
      </g>
    </g>
    <text y="170" font-size="12">120 x 120</text>
  </g>
  <g transform="translate(400 20)">
    <g clip-path="url(#clip)" transform="matrix(1 0 0 -1 0 80)">
      <g clip-path="url(#clip)" transform="matrix(-1 0 0 -1 120 80)">
        <rect width="120" height="80" transform="matrix(-1 0 0 1 120 0)" />
      </g>
    </g>
    <text y="170" font-size="12">120 x 90</text>
  </g>
</svg>

＆＃13;

忽略最顶层<g transform>，仅用于显示彼此相邻的示例。主要的想法是你翻转内容，使右上角被剪掉，转过来再做同样的事情，然后将其翻转回原来的位置。

为此，您需要在三个转换矩阵中输入内容宽度/高度，如图所示。

Answer 2

无需旋转，如果剪辑不是旋转对称，实际上旋转不是解决方案。

Demo，其中E是解决方案。

比较C和E，

C
<svg ... >
    <g clip-path=...>

        <svg ... >
          <image ... />
        </svg>

    </g>  
</svg>

E
<svg ... >
    <g transform="translate(0 -100)">
    <g clip-path=...>

      <g transform="translate(0 100)">
        <svg ... >
          <image ... />
        </svg>
      </g>

    </g>
    </g>
</svg>

重复使用剪辑路径来剪切不同宽高比的元素的恒定斜率角

2 个答案: