相关疑难解决方法(0)

TL; DR:我想在SVG精灵表中使用几个图标作为CSS背景图像,它们保持纵横比并自动缩放以填充父元素,只使用SVG和CSS.请不要使用JavaScript.

所以我有一个SVG格式的spritesheet,我使用SVG-Edit和Notepad ++中的一些手动编码组合.这是源代码:

<svg version="1.1"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  width="600"
  height="400"
  viewBox="0 0 600 400">
  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
  <title>chosen_sprite</title>
  <g>
    <title>Add</title>
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="5" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
    <line id="svg_2" y2="50" x2="70" y1="50" x1="30" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
    <line id="svg_3" y2="30" x2="50" y1="70" x1="50" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
  </g>
  <g>
    <title>Delete</title>
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="105" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
    <line id="svg_2" y2="70" …

我在页面中插入了带有嵌入或对象标记的svg图形:

<object data="graphics.svg" type="image/svg+xml" id="graphics" />

图像正确加载,我可以使用浏览器调试器查看其SVG结构.我看到了所有元素id和属性,但在我看来,没有办法在页面上用我的脚本选择这些元素:

$('#graphics path').length; // 0 (jQuery)
$('path').length; // 0 anyway

是否可以像往常一样浏览图形元素？