Линия SVG наполовину сплошная, наполовину пунктирная

Question

У меня есть встроенный объект SVG и несколько строк в нем. Я пытаюсь закрасить половину линии сплошной, а другую половину пунктирной.

<svg height="30" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <line stroke-dasharray="50%,1%,1%,1%" x1="10" x2="280" y1="10" y2="10" />
  </g>
</svg>

_{Свободный перевод вопроса Svg line half solid, half dashed от участника @YSFKBDY.}

Answer 1

Поместите в line pathLength = "100", чтобы общая длина рассчитывалась как 100 единиц (100 units).

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength

установите для units stroke-dasharray нужный pattern:

<svg>
    <line pathLength="100" stroke-dasharray="50,2,5,2,5,2,5,2,5,2,5,2,5" 
          stroke="black" stroke-width="4"
          x1="10" x2="280" y1="10" y2="10" />
</svg>

_{Свободный перевод ответа от участника @Danny'365CSI'Engelman .}

Answer 2

Самым простым было бы использование двухстрочных объектов. Один для сплошной линии, а другой для пунктирной. Вот пример:

<svg height="30" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <line x1="10" x2="150" y1="10" y2="10" />
    <line stroke-dasharray="5,5" x1="150" x2="280" y1="10" y2="10" />    
  </g>
</svg>

Свойство stroke-dasharray будет повторяться бесконечно, поэтому, если "шаблон", который вы вводите, не длится до конца строки, он снова будет использовать первое значение и повторять шаблон. Вы можете видеть, что в вашем примере длинное тире (значение 50%) повторяется 3 раза с 3 маленькими черточками (значения 1%) между ними (2 пустых и одно сплошное).

_{Свободный перевод ответа от участника @web-tiki.}

БЛОГ НА HUSL

Линия SVG наполовину сплошная, наполовину пунктирная

Ответы (2 шт):