SVG符号当前未显示在chrome中

Question

我在SVG文件中遇到过符号问题。它们目前无法在浏览器中显示。

例如，我在inkscape中创建了这个基本的SVG文件来显示问题：

<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>

看起来应该是这样的：

但由于某种原因，它没有在chrome中显示，有人知道为什么吗？

Answer 1

您正在视图框外部绘制初始符号 - 您的viewBox为100 x 100，但您的cy为100.1。这似乎完全禁用了绘图，所以当你将它带回到带有翻译的视图框中时，那里什么都没有。调整您的cy，以便您在视图框内绘图并减少您的翻译以进行补偿。