SVG 图像模式如何在保持纵横比的情况下工作？答案

【问题标题】：How does SVG image pattern work with preserving aspect ratio?SVG 图像模式如何在保持纵横比的情况下工作？
【发布时间】：2018-06-12 15:06:21
【问题描述】：

我有以下 svg：

<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="display: block; position: absolute; top: 0;">
  <defs>
    <pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%">
      <image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="-20" width="100" height="100"/>
    </pattern>
  </defs>
  <polygon points="0 100, 50,50 100,100" id="abajo" style="stroke-width:0" fill="url(#img1)"/>
</svg>

它没有按预期工作，因为它放大了图像上人物的脸，如下所示：

但它应该是这样的：

三角形多边形会影响图像吗？我该如何解决呢，我需要 4 个三角形，里面有图片才能点击。

【问题讨论】：

听起来你想要的是一个clipPath，而不是一个模式
我认为 clipPath 无法实现类似 headtag.mx/OP 的功能，并且在 Edge 上没有完全支持。

标签： css html image svg web

【解决方案1】：

嗯，这是按预期工作的。您指定一个图案，其单位应填充容器的边界框，然后指定一个 2:1 的容器 - 因此它会拉伸图像。有很多排列可以保留图像的纵横比 - 这完全取决于您想要的行为。

这是一个保留 SVG 本身纵横比的版本，即使它被要求填充更大的空间。

<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style="display: block; position: absolute; top: 0;">
    <defs>
        <pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%">
            <image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="-20" width="100" height="100"/>
          </pattern>
    </defs>
        <polygon points="0 100, 50,50 100,100" id="abajo"  fill="url(#img1)" />
    </svg>

或者如果你想调整图案本身，你可以将图案的高度加倍并在 Y 轴上偏移，以调整容器的 2:1 比例：

<svg height="100%" width="100%" viewBox="0 0 100 100"  style="display: block; position: absolute; top: 0;">
    <defs>
        <pattern id="img1" patternUnits="objectBoundingBox" y="-100%" width="100%" height="200%">
            <image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMax meet"/>
          </pattern>
    </defs>
        <polygon points="0 100, 50,50 100,100" id="abajo"  fill="url(#img1)" />
    </svg>

这是另一个使用过滤器填充图像的版本。

<svg height="100%" width="100%" viewBox="0 0 100 100" style="display: block; position: absolute; top: 0; background:grey">
    <defs>
        <filter id="img1" x="0%" y="0%" width="100%" height="100%" >
            <feImage xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMax meet"/>
             <feComposite operator="in" in2="SourceGraphic"/>
          </filter>
    </defs>
        <polygon points="0 100, 50,50 100,100" id="abajo"  filter="url(#img1)" />
    </svg>

【讨论】：

对不起，我没有指定我想要做的是在屏幕的每一侧都有四个三角形，在中心有一个公共顶点，就像这样 headtag.mx/OP 但在这里他们正在使用在悬停时交换的图像，这会在慢速网络上造成不良行为。非常感谢。
赞成，但实际上我认为只有最后一个 sn-p 才能完成@LuisFernandoTorreblancaMaca 想要的。 jsfiddle.net/vre3vgk5
很抱歉，我已经在更大的屏幕上查看，图像正在放大:(
请用匹配的源代码提出一个新问题。此答案是对您在此处提出的问题的完整答案。