為什麼這篇Svg 顯示 不 出來鄉民發文收入到精華區:因為在Svg 顯示 不 出來這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者danny0838 (道可道非常道)看板Web_Design標題[問題] SVG 引用點陣圖無法...
如題,檔案結構如下:
some.png
some.svg
index.html
我的 svg 以相對路徑引用同一目錄的點陣圖,並加上了一些 svg 的向量圖形:
<image xlink:href="some.png" ... />
直接以瀏覽器開啟 index.svg 檔案可正常顯示。
接著我打算將 svg 嵌入網頁中:
<img href="some.svg" width="500">
但接著以瀏覽器開啟 index.html,
只能看得到 svg 畫的向量圖形,引用的點陣圖卻無法看到。
(在最新版的 Firefox 及 Chrome 上測試)
我也試過將 some.svg 的原始檔開啟,
把 root <svg> 直接貼進 index.html 取代上面的 <img>,
此時點陣圖的部分可以正常顯示
(但似乎無法簡單達到整張 svg 設為 width="500" 的縮放效果)
請教各位前輩,這是什麼原因?有什麼辦法可以解決?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.34.57.99
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1420383429.A.E73.html
感謝回答,又一個方便功能被安全性殺死了orz
我想做的主要是把一張點陣底圖 some.jpg 在不同地方加上標記輸出,
比如在某處放上 some-1.svg、另一處放 some-2.svg、等等,
用 svg 和 xlink 是為了重複使用相同的點陣圖以節省空間。
不考慮 xlink:href="data:xxx" 的做法,因為 base64 編碼只會更浪費空間...
直接在 HTML 裡內嵌 <svg> 可行,但操作麻煩(內嵌的 svg 不方便用軟體編輯),
似乎也不能縮放大小?
canvas 之類要寫 js 程式碼,也不考慮。
想請教是否有其他重複使用相同點陣圖的策略可用?
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:22:16
我在 Fx 上試了 <embed> 和 <object> ,確實可以載入連結的點陣圖,
但無法縮放大小(設定 width 或 height 會裁切)
這有辦法解決嗎?
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:57:10
看不太懂,是改 .svg 原始檔嗎?似乎無效
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 22:57:54