CODEWITHSUNDEEP
htmlsvgxhtml
Josef Holm
Josef Holm

Reputation: 37

Svg object doesn't scale properly

I am trying to making a svg object responsive so it scales nicely when viewing it on phone or tablet.

The tutorial I used didn't help at all. Actually it made my text disappear entirely.

Yeah, I'm using svg to mask text with gifs. (Please understand that I'm just have started to learn general basics and don't assume that I know everything you're saying.)

Look at my Fiddle for details. If Jsfiddle not working check live 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%;
}

Upvotes: 0

Views: 722

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

To make your title responsive, you have to add a viewBox to the SVG. For example

<svg viewBox="0 0 766 150">

Also note that SVG elements and attributes are case sensitive (although some browsers are forgiving) so it should be viewBox, not viewbox.

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

Upvotes: 1

Related Questions