Question

我是SVG世界的新手，正在查看一些Google Material设计图标（link）。特别是清除图标（icon link）。

我尝试使用SVG创建相同的图标。虽然在JSFiddle中两个图标看起来都一样，但我觉得我错过了一些东西，因为我的版本中的路径有点简洁。有人可以解释为什么路径在以后会有更详细的信息吗？

＆＃13;

<!-- My version -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M1 1L15 15M8 8L15 1L1 15" stroke="black" stroke-width="2" />
  <rect x="0" y="0" width="16" height="16" fill="none" />
</svg>

<!-- From Google Material design -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z" />
  <path d="M0 0h24v24h-24z" fill="none" />
</svg>

＆＃13;

Answer 1

你实际上可以让你更小

M1 1L15 15M15 1L1 15

你的原因不同是因为你用笔画（粗线）画出你的十字架。材料设计一个是跟踪形状的轮廓。如果你把它做得更大并添加笔触颜色，你会看到差异：

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
  <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z" stroke="red" stroke-width="0.5"/>
</svg>

＆＃13;

为什么他们这样做？由于各种原因。这是一种更简单的方法，可以与您表现形状的方式保持一致。如果要更改图标颜色，只需更改一个属性即可。此外，字体仅使用轮廓，因此使用笔划的图标集将无法转换为字体。

了解材料设计图标中的SVG路径

1 个答案: