SVG symbol currently not displaying in chrome

2018-06-20 06:00:07

I've been having problems with symbols in SVG files. They are currently not displaying in browsers.

For example I created this basic SVG file in inkscape to show the problem:

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100" width="100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <defs>
  <symbol id="circle">
   <circle style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" stroke-width="3.257" stroke="#008000" cy="1000.1" cx="34.598" r="12.879"/>
  </symbol>
 </defs>
 <g transform="translate(0 -952.36)">
  <use xlink:href="#circle"/>
 </g>
</svg>

And it should look like this:

But for some reason its not displaying as such in chrome, does anyone know why?

You're drawing the initial symbol mostly outside the viewbox - your viewBox is 100 x 100, but your cy is 100.1. This seems to disable drawing completely, so when you bring it back into the viewbox with the translate, there's nothing there. Adjust your cy so you're drawing inside the viewbox and reduce your translate to compensate.

链接地址: http://www.djcxy.com/p/56956.html

上一篇: 创建动画手的工作流程

下一篇: 目前没有在chrome中显示SVG符号