Question

我是svg的总菜鸟。通过基本语法，我正在努力使用defs语法。

使用Chrome测试简化的用例：

这很好用：

<svg viewBox="0 0 400 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g><path id="red" fill="red"  d="M10 10 H 90 V 90 H 10 Z" stroke="black"/></g>
  <g transform="translate(200, 0)"><path id="blue" fill="blue" d="M10 10 H 60 V 60 H 10 Z" stroke="black"/></g>
</svg>

但这并没有显示任何内容：

<svg viewBox="0 0 400 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
        <path id="red" fill="red" />
        <path id="blue" fill="blue" />
  </defs>

  <g><use xlink:href="#red" d="M10 10 H 90 V 90 H 10 Z" stroke="black"/></g>
  <g transform="translate(200, 0)"><use xlink:href="blue" d="M10 10 H 60 V 60 H 10 Z" stroke="black"/></g>
</svg>

假设这是一个简单的疏忽......另外，用symbols可以更好地解决这个问题。我刚刚读过这两篇文章，但是哪一个比另一个更好是不明显的。

更新

根据罗伯特的评论，我修复了丢失的#。有没有办法让这个代码与g roup而不是path在defs内部工作，如下面的代码？

<svg viewBox="0 0 400 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
        <g id="red" fill="red" />
        <g id="blue" fill="blue" />
  </defs>

  <use xlink:href="#red"><path  d="M10 10 H 90 V 90 H 10 Z" stroke="black"/></use>
  <use xlink:href="#blue" ><path d="M10 10 H 60 V 60 H 10 Z" stroke="black"/></use>
 </svg>

Answer 1

使用元素不带d属性，因此它们仍然需要继续使用路径元素。

此外，您的第二个使用元素缺少xlink：href属性中的＃字符。

<svg viewBox="0 0 400 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
        <path id="red" fill="red" d="M10 10 H 90 V 90 H 10 Z" />
        <path id="blue" fill="blue" d="M10 10 H 60 V 60 H 10 Z" />
  </defs>

  <g><use xlink:href="#red" stroke="black"/></g>
  <g transform="translate(200, 0)"><use xlink:href="#blue" stroke="black"/></g>
 </svg>

或者只使用带CSS的样式标签。您可能需要扩展您的基本解析器以应对一些简单的CSS。

<svg viewBox="0 0 400 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
        <style>
          .red {
            fill: red;
          }
          .blue {
            fill : blue;
          }
        </style>
  </defs>

  <path class="red" d="M10 10 H 90 V 90 H 10 Z" stroke="black"/>
  <path class="blue" d="M10 10 H 60 V 60 H 10 Z" stroke="black"/>
 </svg>

简单使用'defs'不会显示任何内容

1 个答案: