嵌入式SVG被修整

我在HTML頁中嵌入一個SVG對象如下：嵌入式SVG被修整

<embed id="svgImg" src="bo5rkbgs5vtsmv053regld2t14.svg" 
type="image/svg+xml" />

然而，所得到的圖像（二者上Firefox和鉻）被修整，它看起來像：

enter image description here

（請注意如何「階躍響應」和「時間」顯示不正確）。我檢查了服務器端的文件，它很好。有任何想法嗎？

來源

2011-12-06 Pantelis Sopasakis

我看來像的圖像尺寸是不是足夠大，圖像本身。你有任何CSS或其他HTML代碼供我們查看，以便仔細檢查嗎？ –

@KevinAnthonyOppegaardRose不，我沒有任何與頁面相關的CSS。根據我的代碼，SVG圖像應該以自然尺寸顯示。 –

你有鏈接到我可以看到的現場網站嗎？ –

只需調整你的viewBox屬性，使其適合你的形象。

例如，你可以試試這個：

viewBox="-10 -10 596 452"

更新： 要動態與JS生成視框，這樣的事情應該工作：

var bbox = document.documentElement.getBBox(); 
var viewbox = document.documentElement.viewBox.baseVal; 
viewbox.x = bbox.x; 
viewbox.y = bbox.y; 
viewbox.width = bbox.width; 
viewbox.height = bbox.height;

請注意，這需要要在svg文檔上完成，所以你可能需要從嵌入它的html文檔進入它，如果有的話看看這個example。

來源

2011-12-08 12:58:47

我試過了（手動），它的工作原理。問題是如何告訴Octave（創建我的數字）來更改viewBox。有沒有辦法改變它使用JS？ –

是的，這是可能的，我會用JS解決方案更新答案。理想情況下，生成該文件的軟件應該是固定的，以便它不生成此類內容。另一種方法是使用SVG Scour預處理這些文件，http://www.codedread.com/scour/。 –

有過在你的代碼的SVG圖像還是太小第二次看。

您需要設置高度爲100％和圖像高度500像素。

<embed id="svgImg" height="100%" type="image/svg+xml" src="s1d5ckv8bojltpturlonh1uap5.svg"> 
<svg width="576" height="500" viewBox="0 0 576 432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

....

這解決在Firefox v8.0的問題

來源

2011-12-06 11:33:27

它不能解決我在Firefox 3.6.24（Ubuntu版本）上遇到的問題。然而，身高：70％看起來很好（但還不完美）。標題顯示正常，但x標籤再次被修剪。 –

嘗試增加一點高度。將它設置爲1000px，看看是否有幫助，如果它確實有幫助，那麼它只是找到一個適用於所有瀏覽器的高度。 –

嵌入式SVG被修整

回答

相關問題