SVG對象無法正確縮放

Question

我正在嘗試使svg對象具有響應性，以便在手機或平板電腦上查看時可以很好地縮放。

我使用的教程完全沒有幫助。 實際上，這使我的文字完全消失了。

是的，我正在使用svg屏蔽帶有gif的文本。 （請理解，我才剛剛開始學習通用基礎知識，不要以為我知道您在說什么。）

查看我的小提琴以獲取詳細信息。 如果Jsfiddle無法正常工作，請查看實時示例 。

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/