爲什麼嵌入在HTML

當我的SVG圖片是在底部截斷

我的SVG是剛剛超過全屏矩形一個circke文本爲什麼嵌入在HTML

SVG

<svg version="1.1" 
baseProfile="full" 
xmlns="http://www.w3.org/2000/svg"> 

<rect width="100%" height="100%" fill="red"/> 

<circle cx="150" cy="100" r="80" fill="green"/> 

<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text> 

</svg>

當IMG SRC是arbitriraly在截斷爲什麼？如何解決這個問題？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title of the document</title> 
</head> 

<body> 
    <img src="hello.svg" type="image/svg+xml"> 
</body> 

</html>

來源

2014-12-31 user310291

指定的svg的width，height和viewPort屬性。

<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> 
 
    <rect width="100%" height="100%" fill="red" /> 
 
    <circle cx="150" cy="100" r="80" fill="green" /> 
 
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text> 
 
</svg>

來源

2014-12-31 14:14:33

您還沒有指定任何大小爲<img>或<svg>所以瀏覽器是選擇適合不確定大小的物體默認大小，這是300x150。所以你的圈子會在底部被切斷。正如chipChocolate已經指出的那樣，解決方案是給出一個或者另一個合適的尺寸。

來源

2014-12-31 15:45:48

爲什麼嵌入在HTML

回答

相關問題