作者danny0838 (道可道非常道)
看板Web_Design
標題[問題] SVG 引用點陣圖無法在 <img> 顯示
時間Sun Jan 4 22:57:06 2015
如題，檔案結構如下：
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1420383429.A.E73.html
1F：→ mmis1000: 因為firefox不允許被用img嵌入的svg引用外部檔案 01/04 23:09
2F：→ mmis1000: 除非你用iframe嵌入就可以 01/04 23:09
3F：→ mmis1000: 另一個方法是用 data:.... 這種類型的網址直接嵌入檔案 01/04 23:10
4F：→ mmis1000: 基本上是為了安全理由而做的限制 01/04 23:12
5F：→ mmis1000: 在bugzilla也寫不會改了 01/04 23:14
感謝回答，又一個方便功能被安全性殺死了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
8F：→ mmis1000: 用js把svg當templete輸出？"<svg>{{img1}}</svg>" 01/06 21:36
9F：→ mmis1000: 然後讀取到時自動把某個mark替代掉 01/06 21:37
10F：→ mmis1000: 轉成 src="data:image/svg+xml;utf8,<svg..... 01/06 21:38
11F：→ mmis1000: 之類的東西 01/06 21:38
12F：→ mmis1000: 或是以 <object> 嵌入應該也能讀外部資源 01/06 21:39
13F：→ mmis1000: 反正要讀外部資源就是不能用<img> 01/06 21:41
我在 Fx 上試了 <embed> 和 <object> ，確實可以載入連結的點陣圖，
但無法縮放大小（設定 width 或 height 會裁切）
這有辦法解決嗎？
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:57:10
14F：→ mmis1000: 把svg的width跟height改100%？ 01/06 22:19
看不太懂，是改 .svg 原始檔嗎？似乎無效
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 22:57:54
16F：→ mmis1000: 你有設定viewBox嗎？ 01/09 16:47