Вопросы Теги

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

str содержит большинство методов в строке. 

df['ID'] = df['ID'].str.zfill(15)

Подробнее: http://pandas.pydata.org/pandas-docs/stable/text.html

1
задан Todd Main 19 January 2019 в 07:16
поделиться

2 ответа

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

<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
ответ дан Michael Mullany 19 January 2019 в 07:16
поделиться

Если я правильно понял вопрос, то вам нужно иметь маску в виде прямоугольника фиксированного размера 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>

0
ответ дан Alexandr_TT 19 January 2019 в 07:16
поделиться
Другие вопросы по тегам:

Похожие вопросы: