Выделите группу трогательных фигур с помощью SVG - PullRequest
Новая
       74

Выделите группу трогательных фигур с помощью SVG

2 голосов
/ 22 февраля 2012

Для определенного стиля, который я собираюсь, я хочу выделить группу фигур в SVG. Применительно к группе свойство stroke, по-видимому, очерчивает каждую фигуру индивидуально, эффективно перекрывая другие фигуры поблизости. Чтобы объяснить мою ситуацию более четко: у меня есть группа соприкасающихся прямоугольников размером 8x8 пикселей каждый. Однако они не образуют прямоугольник большего размера.

Ради простоты, скажем, они образуют крест. Итак, у меня есть 5 прямоугольников - по одному в центре и еще по одному на каждой стороне этого. Я хочу обвести их всех так, как если бы они были одной формы. Учитывая, что эта «перекрестная» форма меняется, я бы предпочел не использовать пути, так как это потребовало бы гораздо большего кодирования. Разве я не мог заставить фильтр эффектов распознавать эту группу как одну фигуру?

Если нет, то возможно ли по крайней мере сделать черную копию этой группы, которая точно на 2 пикселя больше по ширине и высоте, которую я могу расположить позади группы, чтобы создать сплошной черный контур? И если так, возможно ли это без дублирования группы?

Спасибо за любую помощь.

Ответы [ 2 ]

16 голосов
/ 22 февраля 2012

Вы можете использовать svg-фильтр, например, такой: 

<filter id="outline">
  <feMorphology operator="dilate" in="SourceAlpha" radius="1"/>
  <feComposite in="SourceGraphic"/>
</filter>

Используйте фильтр следующим образом: 

<g filter="url(#outline)">
  <circle fill="lime" cx="20" cy="10" r="5"/>
  <rect x="40" y="10" width="100" height="10" fill="lime"/>
  <line x1="20" y1="10" x2="80" y2="15" stroke="lime"/>
</g>

Еще одна альтернатива, которая может работать, в зависимости от того, как выглядит ваш контент, выглядит примерно так: 

<use xlink:href="#g" stroke-width="10" stroke="black"/>
<g id="g">
  <circle fill="lime" cx="20" cy="10" r="5"/>
  <rect x="40" y="10" width="100" height="10" fill="lime"/>
  <circle fill="lime" cx="140" cy="10" r="5"/>
  <circle fill="lime" cx="120" cy="10" r="5"/>
</g>
3 голосов
/ 22 февраля 2012

Как это: 

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="biggerbwcopy">
          <feColorMatrix values="0 0 0 0 0
                                 0 0 0 0 0
                                 0 0 0 0 0
                                 0 0 0 1 0"/>
          <feMorphology operator="dilate" radius="2"/>
        </filter>
    </defs>
    <rect id="r" x="10" y="10" width="20" height="20" fill="blue" onclick="biggerbw()"/>
    <script>

      function biggerbw() {
        document.getElementById("r").style.filter="url(#biggerbwcopy)";
      }
    </script>
</svg>

http://jsfiddle.net/longsonr/LrDHT/1/ нажмите на прямоугольник, и он станет черным и больше.

Вы можете расширить фильтр, чтобы поместить оригинальную форму сверху, используя feMerge

...