У меня есть SVG, который имеет два пути, диагональную линию и маленький круг. Их цвет обводки привязан к linearGradient, расположенному в defs stroke="url(#myGradient)". На Chrome, Firefox и Safari отображается небольшой круг. Но в Edge и IE 11 маленький кружок не соединяет путь URL с идентификатором линейного градиента, если я изменю его атрибут обводки на цвет, то он будет отображаться, но я хочу использовать значение URL.

div {
height: 100px;
width: 100px;
}
<div>
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
 
  <defs>
    <linearGradient id="myGradient">
      <stop offset="1" stop-color="green" />
    </linearGradient>
  </defs>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 26.4583 26.4583" version="1.1" id="svg8-cross-P1">
  <!-- doesn't render in Edge/IE11 -->
  <g class="animate__left-dot" fill-opacity="1" stroke="url(#myGradient)" stroke-width="2.6458" stroke-linecap="round" stroke-linejoin="round">
    <path d="m 6.4855042,19.986408 a 9.5368996,9.5368996 0 0 1 5.62e-5,-0.03275"></path>
  </g>
  <g fill="none" stroke-width="2.6458" stroke-linecap="round">
   <!-- renders -->
    <g stroke="url(#myGradient)" transform="translate(0 -.0191)">
      <path d="M 6.4855595,6.4855597 19.972772,19.972772" class="animate__right-line"></path>
    </g>
  </g>
</svg>
</div>

Вот ссылка кодепа, а также

1
Caleb Taylor 21 Дек 2019 в 03:05

1 ответ

Лучший ответ

в Спецификация SVG

Ключевое слово objectBoundingBox не следует использовать, когда геометрия применимого элемента не имеет ширины или высоты, например, горизонтальной или вертикальной линии, даже если линия имеет фактическую толщину при просмотре из-за ненулевой ширины обводки, поскольку ширина хода игнорируется при расчете ограничительной рамки. Когда геометрия применимого элемента не имеет ширины или высоты и указывается objectBoundingBox, данный эффект (например, градиент или фильтр) будет игнорироваться.

Градиентными единицами по умолчанию для linearGradient являются objectBoundingBox, поэтому градиент не будет применяться, если элемент не имеет ширины или высоты.

Фактическая ширина и высота элемента - 5.62e-5,0.03275. Похоже, что Firefox и Chrome считают, что это достаточно ненулевое значение для рендеринга градиента, но IE / Edge нет. Однако вы играете с огнем, ожидая, что действительно крошечные значения сработают.

Если вы хотите визуализировать градиент над кругом, нарисуйте круг с элементом круга и примените градиент к заливке круга.

2
Robert Longson 21 Дек 2019 в 09:31
59432535