Question

我有一个svg文件，它定义了一个符号：

test.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="id0">
      <stop offset="0" stop-color="#E6E6E6"/>
      <stop offset="1" stop-color="gray"/>
    </linearGradient>
  </defs>
  <symbol id="fid_group" class="logo">
    <rect x="0" y="0" width="50" height="50" fill="url(#id0)" stroke="black" stroke-width="1"/>
  </symbol>
</svg>

我尝试以下列方式使用它：

<html>
<head>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="test.svg#fid_group"></use>
  </svg>
</body>
</html>

在Firefox中我得到了内部渐变的正方形，在chrome中我只得到了黑色笔触。我如何使用渐变或符号有什么问题吗？

来自外部svg的符号中的Chrome渐变未呈现

0 个答案: