当前未在 chrome 中显示的 SVG 符号

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

您主要在视图框外绘制初始符号 - 您的视图框为 100 x 100，但 cy 为 100.1。这似乎完全禁用绘图，因此当您将它带回带有翻译的视图框时，那里什么也没有。调整你的 cy 以便你在 viewbox 内部绘图并减少你的平移以进行补偿。

当前未在 chrome 中显示的 SVG 符号

SVG symbol currently not displaying in chrome

svg

google-chrome

inkscape