Svg對象不能正確縮放

我正在嘗試使svg對象響應，以便在手機或平板電腦上查看時可以很好地縮放。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%; 
}

來源

2015-04-26 Josef Holm

爲了讓您的標題響應，你必須視框添加到SVG。例如

<svg viewBox="0 0 766 150">

另外請注意，SVG元素和屬性是大小寫敏感的（儘管有些瀏覽器是寬容），所以它應該是viewBox，不viewbox。

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

來源

2015-04-26 04:03:16

Svg對象不能正確縮放

回答

相關問題