SVG заполнить центр пути

Question

У меня есть этот SVG с путем:

    <svg width="29" height="29" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
    </svg>

И я хочу иметь этот текущий вариант, а также иметь возможность изменить его с помощью css, чтобы заполнить его полностью; но я не могу, даже с fill-rule: nonzero:

svg {
  fill: black;
  fill-rule: nonzero;
}

<svg width="29" height="29" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
</svg>

Есть ли способ сделать это?

Если это проблема с путем: как мне создать его, чтобы иметь возможность полностью заполнить его css?

Здесь я добавляю другой путь, который я взял из здесь , который работает таким образом:

.path {
  stroke: #000000;
  fill: #6666ff;
}

.path1 {
  fill-rule: nonzero;
}

.path2{
  fill-rule: evenodd;
}

<svg>
  <path class="path path1" d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
 />
</svg>

<svg>
  <path class="path path2" d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
 />
</svg>

Спасибо!

Answer 1

Я думаю, проблема в пути. Попробовав другую демонстрацию, я смог получить работу, как и ожидалось. Попробуйте изменить путь в вашем случае, посмотрите, поможет ли это.

<svg width="100%" height="80px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
 
  <path d="M 100 100 L 300 100 L 200 300 z" fill="black" />
 
   </svg>