html - 防止 SVG 背景图像缩放

Question

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

我一直在研究 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/

Answer 1

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