Question

我尝试填写此SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
    <defs>
        <style>
            .cls-1{fill:#d1d1d1}
        </style>
    </defs>
    <path id="iconfinder_heart_226577" d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z" class="cls-1" transform="translate(-1.372 -7.999)"/>
</svg>

中间有颜色，但我只能更改笔触的颜色。我在这里尝试了很多答案，但是我不明白自己在做什么错。

<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
    <defs>
        <style>
            .cls-1{
              fill:#EB6320;
              stroke: none;
              type: path;
            }
        </style>
    </defs>
    <path
      id="iconfinder_heart_226577"
      d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z"
      class="cls-1"
      transform="translate(-1.372 -7.999)"/>
</svg>

Answer 1

那是因为里面还有另一颗心。这是路径的最后一半：

-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z

仅从头开始替换路径，即可正常运行：

M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm

如何填充此SVG？

1 个答案: