Question

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

我使用的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

要使标题响应，您必须将一个viewBox添加到SVG。例如

<svg viewBox="0 0 766 150">

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

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

Svg对象无法正确缩放

1 个答案: