Question

我正在使用带有蒙版的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小提琴的例子。请注意，当您水平调整窗口大小时，此问题可见。

http://jsfiddle.net/785yjwws/

Answer 1

根据chipChocolate.py的建议，通过阅读viewBox找到解决方案。我发现this great article by on sarasoueidan.com非常有帮助。最终解决方案包括将图像元素的宽度和高度设置为背景图像的完整大小，以编程方式为空间设置父svg元素的宽度和高度，然后设置构成内容的viewBox = "0 0 [programmatic width] [programmatic height]"

防止SVG背景图像缩放

1 个答案: