Как замаскировать часть обведенного пути в SVG? - PullRequest
Новая
       18

Как замаскировать часть обведенного пути в SVG?

0 голосов
/ 19 января 2019

Я хочу замаскировать часть прямой линии в SVG и на самом деле могу только выяснить, как это сделать одним способом, а лучше - другим, потому что длины линий будут генерироваться динамически, а часть маски - нет. ,

Позвольте мне объяснить.

Предположим, у меня есть строка <path d="M0,0 L0,100" stroke="blue" stroke-width="20"/>, я хотел бы замаскировать с прозрачностью первые 10 пикселей, то есть только часть d="M0,0 L0,10".

Я могу сделать это, что дает результаты, которые я хотел бы: 

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
      <rect x="0" y="0" width="20" height="10" stroke="none"/>
      <mask id="chopmask" maskUnits="userSpaceOnUse">
        <rect width="20" height="90" x="0" y="10" fill="white"/>
      </mask>
    </defs>
    <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg>
</svg>

Но проблема в том, что я не могу поступить наоборот с rect в mask, где я просто определяю его как <rect width="20" height="10" x="0" y="0" fill="white"/> (обратите внимание, что height и y отличаются ).

Я что-то упустил из-за того, как определить прямоугольник 10x20 и чтобы его маска просто скрывала часть обведенного пути, или это невозможно?

Ответы [ 2 ]

0 голосов
/ 23 января 2019

работает для меня ... я неправильно понимаю, что вы пытаетесь сделать? 

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
      <rect x="0" y="0" width="20" height="10" stroke="none"/>
      <mask id="chopmask" maskUnits="userSpaceOnUse">
        <rect width="20" height="10" x="0" y="0" fill="white"/>
      </mask>
    </defs>
    <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg>
</svg>
0 голосов
/ 19 января 2019

Если я правильно понял вопрос, то вам нужно иметь маску в виде прямоугольника фиксированного размера 10Х20, которая будет применяться к линии переменной длины.

В этом случае вы можете примерить комбинированную маску, одна часть которой будет непрозрачной fill = "black", а вторая часть будет прозрачной fill = "white" и отображать остальную часть линии. 

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
       <mask id="chopmask" maskUnits="userSpaceOnUse">
       <rect width="20" height="100" x="0" y="0" fill="white"/>
         <rect width="20" height="10" x="0" y="0" fill="black"/>
     </mask>
    </defs>
	      <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg> 
</svg>

Пример анимации процесса маскирования линии прямоугольником 10 x 20px 

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
      <rect x="0" y="0" width="20" height="10" stroke="none"/>
      <mask id="chopmask" maskUnits="userSpaceOnUse">
	    <rect width="20" height="100" x="0" y="0" fill="white"/>
         <rect width="20" height="10" x="0" y="0" fill="black">
		    <animate attributeName="y" dur="2s" values="-10;0" fill="freeze" />
		  </rect> 
     </mask>
    </defs>
	      <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg> 
</svg>
...