作者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/cn.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