Svg 对象不能正确缩放

Question

我正在尝试使 svg 对象具有响应性，以便在 phone 或平板电脑上查看时可以很好地缩放。

我用的tutorial根本没用。实际上它让我的文字完全消失了。

是的，我正在使用 svg 来用 gif 掩盖文本。（请理解我刚刚开始学习一般基础知识，不要以为我知道你所说的一切。）

查看我的Fiddle了解详情。如果 Jsfiddle 不工作，请实时检查 example.

HTML

<h3>
<svg>
<pattern id="p-fire" viewbox="30 100 186 200" patternunits="userSpaceOnUse" width="216" height="200" x="-70" y="20">
<image xlink:href="http://tympanus.net/codrops-playground/assets/images/posts/23145/fire.gif" width="256" height="300">
</image></pattern>
<text text-anchor="middle" x="50%" y="50%" dy=".35em" class="animatedtext">
            blind guardian
        </text>
</svg>
</h3>

CSS

body { background:black }

@font-face {
    font-family: "Toxia";
    src: url(https://dl.dropboxusercontent.com/spa/yf4cv83buq5647x/tappedout/public/Toxia.ttf) format("truetype");
}

@font-face {
    font-family: "Blood";
    src: url(https://dl.dropboxusercontent.com/spa/yf4cv83buq5647x/tappedout/public/metal31.ttf) format("truetype"),
         url(https://dl.dropboxusercontent.com/spa/yf4cv83buq5647x/tappedout/public/metal31.woff) format("woff");
}

.animatedtext {
  fill: url(#p-fire);
  stroke: #8B0000;
  stroke-width: 0;
  stroke-opacity: .5;
  font: 4em/1 Blood, bold;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: static;
  width: 100%;
  height: 100%;
}

Answer 1

要使您的标题具有响应性，您必须向 SVG 添加一个 viewBox。例如

<svg viewBox="0 0 766 150">

另请注意，SVG 元素和属性区分大小写（尽管某些浏览器是宽容的）因此它应该是 viewBox，而不是 viewbox。

http://jsfiddle.net/yjLp4kbx/4/

Svg 对象不能正确缩放

Svg object doesn't scale properly

html

xhtml

svg