Обведите группу соприкасающихся фигур с помощью SVG

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

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

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

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


svg stroke outline
person Ruffy    schedule 22.02.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Как это:

<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.

person Robert Longson    schedule 22.02.2012
comment
feMorphology — это именно то, что мне было нужно! Спасибо - person Ruffy; 22.02.2012

arrow_upward
17
arrow_downward

Например, вы можете использовать фильтр 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>
person Erik Dahlström    schedule 22.02.2012
comment
Спасибо за ответ; пришлось отдать первому :) тоже полезно ^^ +1 - person Ruffy; 22.02.2012