防止 SVG 背景图像缩放答案

【问题标题】：Preventing SVG background image from scaling防止 SVG 背景图像缩放
【发布时间】：2015-01-29 16:48:13
【问题描述】：

我正在使用带有蒙版的 SVG 元素来“剔除”或“剔除”文本，以便显示底层图像。我当前设置的唯一问题是，当浏览器窗口调整大小时，图像元素会拉伸和扭曲，而不是保持固定的纵横比/大小。

我一直在研究 svg 规范并阅读了有关 preserveAspectRatio 的内容，但似乎没有任何效果。

这是我使用的基本元素：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <mask id="masktext1">
              <rect width="100%" height="100%" fill="#fff" />
              <text width="100%" class="svgtext">TEXT 1</text>
            </mask>
          </defs>
          <image xlink:href="https://s3.amazonaws.com/f.cl.ly/items/1w3F3d130t2q1i2n2b2Y/pattern.png" mask="url(#masktext1)" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMinYMin slice" />
        </svg>

这是一个 JS Fiddle 示例。请注意，当您水平调整窗口大小时，该问题是可见的。

http://jsfiddle.net/785yjwws/

【问题讨论】：

@chipChocolate.py 感谢您的提示！我现在正在查看 viewbox，但只是为了澄清一下，您是说只需要在父 svg 元素上设置值吗？

标签： html css svg image-scaling

【解决方案1】：

根据chipChocolate.py 的建议，通过阅读viewBox 找到了解决方案。我发现this great article by on sarasoueidan.com 帮助很大。最终解决方案涉及将图像元素的宽度和高度设置为背景图像的全尺寸，以编程方式为空间设置父 svg 元素的宽度和高度，然后设置框架内容的viewBox = "0 0 [programmatic width] [programmatic height]"。

【讨论】：

由于协议的限制，当你不得不用 JavaScript 操作你的 svg 时总是很伤心