[問題] SVG 引用點陣圖無法在 <img> 顯示

看板Web_Design作者 (道可道非常道)時間9年前 (2015/01/04 22:57), 9年前編輯推噓0(0016)
留言16則, 1人參與, 最新討論串1/1
如題,檔案結構如下: 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
因為firefox不允許被用img嵌入的svg引用外部檔案
01/04 23:09, 1F

01/04 23:09, , 2F
除非你用iframe嵌入就可以
01/04 23:09, 2F

01/04 23:10, , 3F
另一個方法是用 data:.... 這種類型的網址直接嵌入檔案
01/04 23:10, 3F

01/04 23:12, , 4F
基本上是為了安全理由而做的限制
01/04 23:12, 4F

01/04 23:14, , 5F
在bugzilla也寫不會改了
01/04 23:14, 5F

01/04 23:15, , 6F
http://goo.gl/FE4nqf bugzilla issue 連結
01/04 23:15, 6F

01/04 23:21, , 7F
http://goo.gl/N6g1Rk 嵌入的範例
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
用js把svg當templete輸出?"<svg>{{img1}}</svg>"
01/06 21:36, 8F

01/06 21:37, , 9F
然後讀取到時自動把某個mark替代掉
01/06 21:37, 9F

01/06 21:38, , 10F
轉成 src="data:image/svg+xml;utf8,<svg.....
01/06 21:38, 10F

01/06 21:38, , 11F
之類的東西
01/06 21:38, 11F

01/06 21:39, , 12F
或是以 <object> 嵌入應該也能讀外部資源
01/06 21:39, 12F

01/06 21:41, , 13F
反正要讀外部資源就是不能用<img>
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
把svg的width跟height改100%?
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
你有設定viewBox嗎?
01/09 16:47, 16F
文章代碼(AID): #1KgLJ5vp (Web_Design)