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

Question

我正在通过SVG剪辑路径进行剪贴蒙版。我正在使用一个带有三个剪裁遮罩的SVG元素。

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

所以我想要是移动图像剪切路径里面，这样我可以显示图像

这里是Jsfiddle链路的实际面积。

我不想改变图像的纵横比。 请让我知道是否有任何方法。

感谢

Answer 1

如果你不想让你的图片拉伸，打破他们的宽高比，那么就不要使用preserveAspectRatio="none"。您可能需要使用"xxx slice"变体之一。下面，我为每幅图像使用了不同的图像，以使它们分别对齐左侧，中间和右侧。

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

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

更新

[我]仍无法获得第一图像的精确视图。我想展现女孩的脸。但它没有发生

一个解决方案是改变你的图像，使感兴趣的区域在图像的所需部分。

否则，您需要开始使用viewBoxes。但是，一旦viewBox涉及，但不能再按照原始示例拉伸父SVG以填充页面宽度和高度。您必须对图像整体的固定长宽比感到满意。

这里有一种方法来解决问题：

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

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

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或其容器的最小和maxumum的宽度和高度，你可能会显示其边界外的图像的空白部分。您可以在css上为svg或其容器设置min-height，max-height，min-width或max-width。另外，由于显示有趣的区域取决于设备/浏览器的宽度，所以额外的增强将是根据用户的宽度自动计算确切的翻译以使感兴趣的区域与脚本居中。