Question

我正在通过SVG剪辑路径进行剪贴蒙版。我正在使用一个具有三个剪切屏蔽的SVG元素。

问题是我的svg正在获得完整的窗口宽度和高度，因此图像也变得全宽和高。

所以我想要的是在剪切路径内移动图像，以便我可以显示图像的实际区域

以下是Jsfiddle链接。

我不想改变图片的宽高比。如果有任何办法，请告诉我。

由于

Answer 1

如果您不希望图像拉伸并缩小其宽高比，请不要使用preserveAspectRatio="none"。您可能想要使用其中一个"xxx slice"变体。下面我为每张图片使用了不同的图像，以使它们分别对齐左侧，中间和右侧。

＆＃13;

*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}

＆＃13;

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             xml:space="preserve">
    <clipPath id="last" clipPathUnits="objectBoundingBox">
        <polygon points="1,0 .78,0 0.58,1 1,1"/>
    </clipPath>
    <clipPath id="first" clipPathUnits="objectBoundingBox">
        <polygon points="0,0 0.4,0 0.218,1 0,1"/>
    </clipPath>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
    </clipPath>
    <image class="topImage" clip-path="url(#mid)" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/>
    <!-- top -->
    <image class="leftImage" clip-path="url(#first)" preserveAspectRatio="xMinYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>
    <!-- right -->
    <image class="rightImage" clip-path="url(#last)" preserveAspectRatio="xMaxYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>
    </svg>

＆＃13;

<强>更新

[我]仍然无法获得第一张图片的确切视图。我想展示女孩的脸。但它没有发生

一种解决方案是更改图像，使感兴趣的区域位于图像的所需部分。

否则你需要开始使用viewBoxes。但是，一旦viewBox参与其中，您就无法再按照原始示例拉伸父SVG来填充页面宽度和高度。您必须对整个图像的固定宽高比感到满意。

这是解决问题的唯一方法：

＆＃13;

*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}

＆＃13;

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2 1">
  <defs>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.3,0 1,0 0.7,1 0,1"/>
    </clipPath>
  </defs>

  <image class="leftImage" preserveAspectRatio="xMaxYMid slice" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>

  <image class="rightImage" preserveAspectRatio="xMidYMid slice" x="1" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>

  <image class="topImage" preserveAspectRatio="xMidYMid slice" x="0.5" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"
         clip-path="url(#mid)"/>

</svg>

＆＃13;

Answer 2

您可能想要更改图片的x（也可能是y）并将相反的翻译应用到相应的剪切路径。

<!-- language: lang-html -->

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none"
         xml:space="preserve">
    <clipPath id="last" clipPathUnits="objectBoundingBox" transform="translate(-200,0)">
        <polygon points="1,0 .78,0 0.58,1 1,1"/>
    </clipPath>
    <clipPath id="first" clipPathUnits="objectBoundingBox" transform="translate(450,0)">
        <polygon points="0,0 0.4,0 0.218,1 0,1"/>
    </clipPath>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
    </clipPath>
    <image class="topImage" clip-path="url(#mid)" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/>
    <!-- top -->
    <image class="leftImage" clip-path="url(#first)" width="100%" height="100%" x="-450" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>
    <!-- right -->
    <image class="rightImage" clip-path="url(#last)" width="100%" height="100%" x="200" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>
</svg>

但是，如果您没有修复svg或其容器的最小和最大宽度和高度，则可能会在其边界外显示图像的空白部分。您可以在css上为svg或其容器设置min-height，max-height，min-width或max-width。

此外，由于显示有趣的区域取决于设备/浏览器的宽度，因此额外的增强功能是根据用户的宽度自动计算精确的翻译以使用脚本居中感兴趣的区域。

如何使用SVG剪贴蒙版裁剪特定图像区域

2 个答案: