Svg圖像不顯示在Firefox中

在一個簡單的SVG元素中，我有一個圖像。Svg圖像不顯示在Firefox中

鉻：版本28 - 完美的作品
火狐：22.0 - 無圖像繪製
歌劇：12.16 - 圖像顯示大於正常的4倍

代碼：

 
    <svg width="500px" height="500px" viewBox="0 0 70 70"> 
     <image x="0" y="0" width="10" height="10" 
       id="knight" xlink:href="/images/knight.svg" /> 
    </svg>

來源

2013-07-17 Chirila Alexandru

Knight.svg文件：https://docs.google.com/file/d/0B4duJ7F-vg_fWFh0c2dGRnpERWc/edit?usp=sharing –

這是一個SVG圖像檢查我的其他評論的鏈接。您可以使用文本編輯器打開它並查看svg內容。 –

您的SVG不被縮放以適合你的10×10圖像矩形，因爲它沒有視框圖像。 SVG渲染器需要知道SVG內容的尺寸才能知道如何縮放它。這就是viewBox屬性的用途。

嘗試將以下內容添加到knight.svg中的根元素<svg>元素中。

viewBox="0 0 45 45"

此外，您需要爲svg和xlink定義您的命名空間。雖然也許你剛剛刪除了那些清晰（？）。

來源

2013-07-18 08:08:40

謝謝，它工作完美。是的，爲了清晰起見，我刪除了命名空間。 –

你的騎士的尺寸是45 x 45像素。左上角（10 x 10）像素爲空白。

您要求在<image>標記中顯示左上角的圖像，以便Firefox正確顯示任何內容，因爲這裏沒有任何內容。

如果你想看到的騎士，讓<image>寬度和高度45相匹配的基礎knight.svg尺寸。

無論是鍍鉻，也不歌劇似乎正確顯示

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’

來源

2013-07-18 07:22:26

Svg圖像不顯示在Firefox中

回答

相關問題