Простой SVG только с тремя путями, неправильно нарисованными в Chrome

Question

У меня есть следующий простой файл SVG, который рисует три диагональные линии:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; fill-rule:evenodd; "
viewBox="0 0 6989 5119"
 xmlns:xlink="http://www.w3.org/1999/xlink">

   <path fill="#000000" d="M4409 930c63,37 125,74 187,112 -1,1 -2,3 -3,4 -62,-37 -124,-74 -187,-111 1,-2 2,-3 3,-5z"/>
   <path fill="#000000" d="M4426 906c62,37 124,74 186,111 -1,2 -2,4 -3,5 -62,-37 -124,-74 -186,-111 1,-2 2,-4 3,-5z"/>
   <path fill="#000000" d="M4442 881c62,38 124,75 186,112 -1,2 -2,3 -3,5 -62,-37 -124,-74 -186,-112 1,-1 2,-3 3,-5z"/>   
</svg>

Чтобы отобразить SVG в файле HTML, я добавляю следующий HTML-тег:

<object height="1080px" type="image/svg+xml" data="test.svg"></object>

В Firefox всеработает должным образом, см. изображение ниже.

В Chrome проблема с линией посередине (см. изображение ниже).

Почему это отличается в Chrome и Firefox?Как заставить Chrome правильно рисовать линии?

Answer 1

Если вы измените среднюю линию на

<path fill="#000000" d="M4426 906c62,37 124,74 186,111 -1,2 -2,4 -3,5 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>

Он будет работать правильно в обоих браузерах.

Answer 2

Повернутые прямоугольники, которые вы визуализируете с помощью кривых, имеют несколько разные формы. Создание каждой фигуры одинаково не решает проблему для меня в Chrome ...

<svg viewBox="0 0 6989 5119">
  <path d="M4409 930c62,37 124,74 186,112 -1,2 -2,3 -3,4 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>
  <path d="M4426 906c62,37 124,74 186,112 -1,2 -2,3 -3,4 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>
  <path d="M4442 881c62,37 124,74 186,112 -1,2 -2,3 -3,4 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>   
</svg>

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

<svg viewBox="0 0 6989 5119">
  <path d="M4409 930 l 187,111 -3,4 -187,-111 z"/>
  <path d="M4426 906 l 187,111 -3,4 -187,-111 z"/>
  <path d="M4442 881 l 187,111 -3,4 -187,-111 z"/>   
</svg>

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

<svg viewBox="0 0 6989 5119" fill="none" stroke="black" stroke-width="5">
  <path d="M4409 930 l -187,-111"/>
  <path d="M4426 906 l -187,-111"/>
  <path d="M4442 881 l -187,-111"/>   
</svg>

Примечание ... выходит за рамки вашего вопроса, но вы также используете ОГРОМНОЕ полотно ... правильно ли тысячи пикселей?

Answer 3

Будет ли это работать для вас?

<svg  viewBox="0 0 6989 5119">
   <path fill="#000000" d="M 0 0 L 3000 3000" stroke="black" stroke-width="5"/>
   <path fill="#000000" d="M 0 50 L 3000 3050" stroke="black" stroke-width="5"/>
   <path fill="#000000" d="M 0 100 L 3000 3100" stroke="black" stroke-width="5"/>
</svg>