[問題] SVG 引用點陣圖無法在 <img> 顯示
如題,檔案結構如下:
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
→
01/04 23:09, , 1F
01/04 23:09, 1F
→
01/04 23:09, , 2F
01/04 23:09, 2F
→
01/04 23:10, , 3F
01/04 23:10, 3F
→
01/04 23:12, , 4F
01/04 23:12, 4F
→
01/04 23:14, , 5F
01/04 23:14, 5F
→
01/04 23:15, , 6F
01/04 23:15, 6F
→
01/04 23:21, , 7F
01/04 23:21, 7F
感謝回答,又一個方便功能被安全性殺死了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
→
01/06 21:36, , 8F
01/06 21:36, 8F
→
01/06 21:37, , 9F
01/06 21:37, 9F
→
01/06 21:38, , 10F
01/06 21:38, 10F
→
01/06 21:38, , 11F
01/06 21:38, 11F
→
01/06 21:39, , 12F
01/06 21:39, 12F
→
01/06 21:41, , 13F
01/06 21:41, 13F
我在 Fx 上試了 <embed> 和 <object> ,確實可以載入連結的點陣圖,
但無法縮放大小(設定 width 或 height 會裁切)
這有辦法解決嗎?
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:57:10
→
01/06 22:19, , 14F
01/06 22:19, 14F
→
01/06 22:21, , 15F
01/06 22:21, 15F
看不太懂,是改 .svg 原始檔嗎?似乎無效
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 22:57:54
→
01/09 16:47, , 16F
01/09 16:47, 16F