Линия SVG с gradleиентным штрихом не будет отображаться прямо

Я пытаюсь реплицировать


с помощью SVG. Теперь, когда прямая линия с SVG работает отлично, а вторая, я поглажу ее gradleиентом, она больше не будет отображаться по прямой.

Следующий код работает, но обратите внимание: y1 и y2 должны быть разделены на 1 единицу. Если я установил y1 и y2-210, например, линия исчезнет.

         

Вероятно, я просто пропустил какую-то очевидную функцию линейных gradleиентов, и линия выглядит хорошо, но я бы предпочел просто прямолинейно. Благодарю.

Вы попадаете в последний абзац в этой части спецификации SVG

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

objectBoundingBox является значением по умолчанию для gradientUnits, поэтому вам нужно использовать gradientUnits = “userSpaceOnUse”, а затем настроить значения, подходящие для разных систем координат.

Роберт Лонгсон дает отличное объяснение. Но иногда userSpaceOnUse – это боль, потому что он распространяет интерполяцию по всему canvasу, а не только по строке.

Вместо этого вы можете добавить небольшое количество значений, чтобы гарантировать, что размер bbox не равен нулю.

Например,

   

будет рисовать прямую линию с gradleиентом.

Предполагая, что вы не хотите никакой точности, вы можете изменить линию на заполненный путь, как показано ниже

  

или, альтернативно, заполненному прямоугольнику, как показано ниже

  

Интересно также отметить, что этот вопрос затрагивает только вертикальные и горизонтальные линии. Наклонная линия отображается правильно.

Давайте будем гением компьютера.