Штрих SVG как склеенные линии - PullRequest
Новая
       43

Штрих SVG как склеенные линии

1 голос
/ 13 февраля 2011

Есть ли способ определить обводку одного полигона, чтобы он выглядел как несколько склеенных полигонов? Посмотрите это изображение:
Adjanced lines

Ответы [ 3 ]

2 голосов
/ 14 февраля 2011

Нет, не сейчас. (В будущем Векторные эффекты могут позволить вам сделать это.)

На данный момент вам нужно нарисовать два многоугольника с разными цветами и толщиной обводки, а затем использовать обтравочный контур, чтобы убедиться, что более толстый обводка не рисует и внутри фигуры. Например: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100">
  <defs>
    <polygon id="p" points="20,10 10,60 30,50 50,30"/>
    <clipPath id="c">
      <!-- a 100x100 square with the polygon cut out of it -->
      <path d="M0,0 100,0 100,100 0,100 z M20,10 10,60 30,50 50,30 z"/>
    </clipPath>
  </defs>
  <rect width="100" height="100"/>
  <g clip-path="url(#c)" fill="none">
    <use xlink:href="#p" stroke="yellow" stroke-width="8"/>
    <use xlink:href="#p" stroke="blue" stroke-width="4"/>
  </g>
</svg>
0 голосов
/ 07 июля 2015

Вы можете эмулировать это с помощью морфологического фильтра. 

<svg width="2000px" height="2000px" viewBox="0 0 4000 4000">
  <defs>
    <filter id="dual-line" primitiveUnits="userSpaceOnUse">
      <feColorMatrix result="just-stroke" type="matrix" values="0 0 0 0 0
                                           0 1 0 0 0 
                                           0 0 1 0 0 
                                           -1 0 0 1 0"/>
      
       <feColorMatrix in="SourceGraphic" result="just-fill" type="matrix" 
                                   values="0 0 0 0 1
                                           0 0 0 0 0 
                                           0 0 0 0 0 
                                           0 0 0 1 0"/>     
      
  
       <feMorphology in="just-stroke" operator="dilate" radius="5"/>
       <feGaussianBlur stdDeviation="6"/>
      <feComponentTransfer result="pre-outer">
        <feFuncA type="table" tableValues="0 0 .75  1">
      </feComponentTransfer>
        
        <feColorMatrix result="blackstroke" in="just-stroke" type="matrix" values=" 0 0 0 0 0
                                                                0 0 0 0 0
                                                                0 0 0 0 0 
                                                                0 0 0 1 0"/>
        
       <feComposite operator="over" in2="pre-outer" in="blackstroke"/>
        <feComposite operator="in" in2="just-fill"/>
   
    </filter>
    </defs>
<g filter="url(#dual-line)">
  <path d="M100 800 C 400 100, 650 100, 950 800 S 1500 1500, 100 800" stroke-width="5" stroke="green" fill="red"/>
</g>
</svg>
0 голосов
/ 14 февраля 2011

Как и в последнем ответе, вам нужно 2 пути. Однако я бы использовал 2 отверстия для пончиков, в которых отверстие имеет диаметр почти всего кольца. Следует отметить, что внешняя часть внутреннего кольца образует внутреннюю часть внешнего кольца. Очевидно, ширина хода равна нулю.

...