为相邻形状创建轮廓(Create outline for adjacent shapes)

鉴于一些接近的SVG形状，有没有什么方法可以设置它们的外边缘只有边框？

鉴于这样的SVG：

我想在三个相邻矩形的外边缘周围有一个边框。这可能只使用样式吗？我使用的形状相对简单（无孔或奇怪的几何图形），边界形状将共享完全相同的边界。

Given some bordering SVG shapes, is there any way to style them to have a border on their outer edges only?

Given an SVG like this:

I would like to have a border around the outer edge of the three adjacent rectangles. Is this possible using styles only? The shapes I work with are relatively simple (no holes or weird geometries), and bordering shapes will share exactly the same borders.

最满意答案

当我建立一个JSFiddle来为这个问题创建一个图片时，我也想出了一个可能的解决方案。它确实需要对SVG进行一些编辑（复制形状），并且它对于更复杂的形状不是很宽容，但对我来说足够好，而且我不必合并形状。

具有共同外边界的形状

小提琴： https ： //jsfiddle.net/rye2vfpz/

这里所有形状都是重复的，最底层提供了笔画，最顶层提供填充。然后我使用dilate过滤器让填充物从相对的两侧覆盖笔划。只要中风的深度是稀释倍数的两倍，只有外部的笔画将是可见的。仔细研究稀释半径和笔画宽度，直到您获得想要的效果。

As I set up a JSFiddle to create a picture for the question, I also came up with a possible solution. It does require some editing of the SVG (duplicating shapes), and it's not very forgiving with more complex shapes, but good enough for me, and I don't have to merge the shapes.

Shapes with common outer border

Fiddle: https://jsfiddle.net/rye2vfpz/

Here all shapes are duplicated, with the bottom-most layer providing the stroke, and the top-most providing the fill. I then use a dilate filter to let the fill cover the strokes from opposing sides. As long as the stroke is more than twice as thick as the dilution, only the outer strokes will be visible. Fiddle around with dilution radius and stroke width until you have the wanted effect.

更多推荐