9 views 1 likes 0 comments Share this: コバにゃんチャンネル About author コバにゃん☆です? 2910 subscribers viewes View all posts
0 views 0 likes 0 comments Share this: 大象中醫 About author 長照是一個劇變的旋轉舞台 百年難得一見 沒有準備的人 被旋轉舞台甩出去 不是坐下就是躺下 而大象中醫是太極的推手 推動著旋轉舞台 讓 所有爬不起來的人 背後有一股推手力量 支撐再站起來 1310 subscribers viewes View all posts
0 views 0 likes 0 comments Share this: 大象中醫 About author 長照是一個劇變的旋轉舞台 百年難得一見 沒有準備的人 被旋轉舞台甩出去 不是坐下就是躺下 而大象中醫是太極的推手 推動著旋轉舞台 讓 所有爬不起來的人 背後有一股推手力量 支撐再站起來 1310 subscribers viewes View all posts
作者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 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1420383429.A.E73.html → mmis1000: 因為firefox不允許被用img嵌入的svg引用外部檔案 01/04 23:09 → mmis1000: 除非你用iframe嵌入就可以 01/04 23:09 → mmis1000: 另一個方法是用 data:.... 這種類型的網址直接嵌入檔案 01/04 23:10 → mmis1000: 基本上是為了安全理由而做的限制 01/04 23:12 → mmis1000: 在bugzilla也寫不會改了 01/04 23:14 → mmis1000: https://goo.gl/FE4nqf bugzilla issue 連結 01/04 23:15 → mmis1000: https://goo.gl/N6g1Rk 嵌入的範例 01/04 23:21 感謝回答，又一個方便功能被安全性殺死了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 → mmis1000: 用js把svg當templete輸出？"<svg>{{img1}}</svg>" 01/06 21:36 → mmis1000: 然後讀取到時自動把某個mark替代掉 01/06 21:37 → mmis1000: 轉成 src="data:image/svg+xml;utf8,<svg..... 01/06 21:38 → mmis1000: 之類的東西 01/06 21:38 → mmis1000: 或是以 <object> 嵌入應該也能讀外部資源 01/06 21:39 → mmis1000: 反正要讀外部資源就是不能用<img> 01/06 21:41 我在 Fx 上試了 <embed> 和 <object> ，確實可以載入連結的點陣圖， 但無法縮放大小（設定 width 或 height 會裁切） 這有辦法解決嗎？ ※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:57:10 → mmis1000: 把svg的width跟height改100%？ 01/06 22:19 → mmis1000: https://goo.gl/2xQJXU 01/06 22:21 看不太懂，是改 .svg 原始檔嗎？似乎無效 ※ 編輯: danny0838 (114.34.57.99), 01/06/2015 22:57:54 → mmis1000: 你有設定viewBox嗎？ 01/09 16:47 ... <看更多>
html svg無法顯示 在 [問題] SVG 引用點陣圖無法在<img> 顯示- 看板Web_Design 的必吃
如題，檔案結構如下：
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
※ 文章網址: https://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
... <看更多>