Question

我有一个不会在iPhone 4上呈现的SVG，但似乎在所有其他浏览器上都能正常工作。我想知道它是否可能是不受支持的转换属性？

<?xml version="1.0" encoding="UTF-8"?>
<svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g>
  <title>Layer 1</title>
  <use x="0.084832" y="-0.670279" transform="matrix(0.995734, 0, 0, 0.995734, -0.0756826, 1.1509)" xlink:href="#svg_2" id="svg_3"/>
  <g id="svg_4"/>
 </g>
 <defs>
  <symbol viewBox="0 0 40 40" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="svg_2">
   <g id="svg_1">
    <path d="m19.700001,11.2c-0.400002,-1.3 -0.6,-5 -1.6,-7.2c0,-0.1 0,-0.1 0,-0.2c-0.200001,-0.4 -0.4,-0.8 -0.800001,-1.1c0,0 0,0 0,0c-0.099998,-0.1 -0.199999,-0.1 -0.299999,-0.2c0,0 -0.1,0 -0.1,-0.1c0,0 0,0 -0.1,0c-0.299999,-0.1 -0.5,-0.2 -0.799999,-0.3c-1.6,-0.3 -3.1,0.7 -4.9,2c-1.700001,1.2 -3.8,1.8 -5.400001,2.1c-2.5,0.3 -3.7,0.6 -4.4,1c0,0 0,0 0,0c-0.2,0.1 -0.3,0.2 -0.4,0.3c0,0 0,0 -0.1,0c-0.1,0.1 -0.1,0.2 -0.2,0.3c-0.2,0.2 -0.3,0.4 -0.4,0.599999c0,0 0,0 0,0.1c-0.1,0.2 -0.2,0.5 -0.2,0.8c0,0.3 0,0.7 0.2,1c0,0 0,0.099999 0.1,0.099999c0.6,1.900001 2.5,4.3 3.4,6.200001c1.3,2.699999 2.1,4.5 3.1,5.4c0.9,0.799999 3.2,2.299999 6.4,4.4c3.599999,1.6 5.2,-0.9 5.500001,-2.199999c0.299999,-1.200001 1.299999,-4.700001 1.699999,-6.300001c0.4,-1.6 -0.199999,-5 -0.699999,-6.7l0,0zm-5.400001,-0.599999c0.5,-0.3 1.4,-0.5 2.3,-0.3c-0.200001,0.7 -0.6,1.4 -1.400001,1.9c-0.8,0.5 -1.3,0.400001 -2,0.1c0,-0.6 0.2,-1.2 1.1,-1.7l0,0zm-6.5,4.299999c-1,0.200001 -1.7,-0.099999 -2.3,-0.5c0.6,-0.7 1.4,-1.2 2,-1.299999c1,-0.200001 1.5,0.099999 1.9,0.599999c-0.4,0.6 -0.7,1 -1.599999,1.2l0,0zm6.8,7.1c-2.1,0.799999 -4.5,-0.200001 -5.200001,-2.299999c-0.099999,-0.200001 -0.099999,-0.400002 -0.2,-0.700001c1,1.6 3,2.299999 4.900001,1.6c1.9,-0.700001 3,-2.6 2.699999,-4.4c0.1,0.199999 0.200001,0.4 0.300001,0.599998c0.799999,2.1 -0.4,4.400002 -2.5,5.200001l0,0z" fill="#B39C0B" id="svg_5"/>
    <path d="m40,21.6c0,-0.1 0,-0.200001 0,-0.300001c0,0 0,-0.099998 0,-0.099998c0,0 0,0 0,-0.1c-0.099998,-0.300001 -0.200001,-0.6 -0.400002,-0.800001c-0.799999,-1.299999 -2.599998,-1.799999 -4.799999,-2.199999c-2.099998,-0.4 -3.9,-1.6 -5.299999,-2.5c-1.9,-1.6 -2.9,-2.3 -3.700001,-2.5c0,0 0,0 0,0c-0.199999,0 -0.299999,-0.1 -0.5,-0.1c0,0 0,0 -0.099998,0c-0.1,0 -0.200001,0 -0.300001,0c-0.299999,0 -0.5,0.1 -0.699999,0.2c0,0 0,0 -0.1,0c-0.300001,0.1 -0.5,0.2 -0.700001,0.400001c-0.299999,0.2 -0.5,0.5 -0.6,0.799999c0,0 0,0.1 -0.099998,0.1c-1,1.799999 -1.400002,4.799999 -2.1,6.700001c-1,2.799999 -1.700001,4.599998 -1.700001,5.9c0,1.199999 0.5,3.9 1.200001,7.699999c1.299999,3.700012 4.199999,3.100002 5.4,2.5c1.1,-0.599991 4.299999,-2.299988 5.700001,-3.099991c1.5,-0.799999 3.5,-3.600008 4.399998,-5.100008c0.700001,-1.200001 3.200001,-3.9 4.200001,-6.099991c0,-0.1 0.100002,-0.1 0.100002,-0.20001c0,-0.29999 0.099998,-0.699999 0.099998,-1.199999c0,0 0,0 0,0l0,0zm-14.799999,-0.200001c0.9,0.4 1.299999,1.1 1.5,1.800001c-1,0.199999 -1.900002,0.099998 -2.300001,-0.200001c-0.9,-0.4 -1.1,-1 -1.1,-1.6c0.5,-0.299999 1,-0.4 1.900002,0l0,0zm3.599998,11.800001c-0.099998,0.200001 -0.199999,0.399998 -0.4,0.599998c0.6,-1.799999 -0.299999,-3.799999 -2.1,-4.799999c-1.799999,-0.9 -4,-0.4 -5.099998,1.1c0.099998,-0.200001 0.099998,-0.4 0.199999,-0.700001c1,-1.9 3.4,-2.699999 5.5,-1.699999c2,1.099998 2.9,3.5 1.9,5.5zm3.200001,-6.400002c-0.5,-0.199999 -1.200001,-0.799999 -1.700001,-1.599998c0.700001,-0.300001 1.400002,-0.400002 2.299999,-0.1s1.200001,0.799999 1.300003,1.5c-0.5,0.4 -1,0.6 -1.900002,0.199999l0,0z" fill="#B39C0B" id="svg_6"/>
   </g>
  </symbol>
 </defs>
</svg>

我尝试过使用所有这些优化器：

https://jakearchibald.github.io/svgomg/

http://petercollingridge.appspot.com/svg-editor

https://www.npmjs.com/package/gulp-svgmin

我正在使用spritesmith。当我在iPhone 4上查看生成的精灵时，大多数图标都在那里，但我的问题SVG不可见。

https://www.npmjs.com/package/gulp-spritesmith

这是我的完整精灵，有趣的是，Dropbox查看器也不会渲染所有图标。如果你保存svg并在Chrome中打开它，你会看到所有这些：https://www.dropbox.com/s/3o981ljy0cs9ued/sprite-d5c1601f.svg?dl=0

更新 - 使用Illustrator保存文件可以解决此问题，但是拥有自动解决方案或linting以便为将来的文件提供警告仍然是一件好事。

Answer 1

尝试在<defs>之前移动<use>部分。 IIRC较旧的Safari / Webkit有一个前向引用的错误。

IE中。重新排列文件，以便标记的顺序如下：

<svg>
  <defs>
    <symbol>
  </defs>
  <g>
    <use>
  </g>
</svg>

SVG背景图片无法在iPhone 4上运行？

1 个答案: