防止SVG背景图像缩放 [英] Preventing SVG background image from scaling

问题描述

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

I'm using SVG elements with masks to "knock out" or "punch out" text so that the underlying image can be shown through. The only problem with my current set up is that when the browser window is resized, the image elements stretch and distort, rather than staying at a fixed aspect ratio/size.

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

I've been pouring over the svg spec and have read about preserveAspectRatio but nothing seems to work.

以下是我使用的基本元素：

Here's the basic element I'm using:

<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示例。请注意，当您水平调整窗口大小时，问题是可见的。

Here's a JS Fiddle example. Note that the issue is visible when you resize the window horizontally.

http://jsfiddle.net/785yjwws/

推荐答案

该解决方案是通过阅读viewBox中的建议由chipChocolate.py提供。我在sarasoueidan.com上发现了这篇伟大的文章，它极大地帮助了我。最终解决方案包括将图像元素的宽度和高度设置为背景图像的全尺寸，以编程方式为该空间设置父级svg元素的宽度和高度，然后设置 viewBox = 0 0 [程序化宽度] [程序高度]将内容框架化。

The solution was found by reading up on viewBox as suggested by chipChocolate.py. I found this great article by on sarasoueidan.com which helped immensely. The end solution involved setting the width and height of the image element to be the full size of the background image, setting the width and height of the parent svg element programmatically for the space, and then setting viewBox = "0 0 [programmatic width] [programmatic height]" which frames the content.

这篇关于防止SVG背景图像缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！