具有非均匀背景的块内的渐变边框

Question

Дмитрий Полянин

Asked:2022-02-12 18:19:19 +0000 UTC2022-02-12 18:19:19 +0000 UTC 2022-02-12 18:19:19 +0000 UTC

如何在 SVG 中围绕图像制作光环轮廓？

772

我有一个 SVG 绘图，示例代码如下。

需要通过过滤器在整个图片周围制作一个宽度为N像素的白色光晕轮廓。

有必要找到一个解决方案，而不是针对这个特定的绘图，而是一个我可以应用于任何绘图的过滤器。例如，文本或一组形状。

问题的上下文是为 Telegram 创建贴纸，其中光环轮廓是推荐的组件。

div {
background-color: blue;
}

<div>
<svg id="placeholder" width="600" height="600" version="1.1" viewBox="-120 -120 240 240" preserveAspectRatio="none">
  <path d="M25.9-96.6C38.3-92.4 41.3-99.8 54-93.5 65.7-85.7 60.9-79.3 70.7-70.7 79.3-60.9 85.7-65.7 93.5-54 99.8-41.3 92.4-38.3 96.6-25.9 99.1-13.1 107.1-14.1 108 0 107.1 14.1 99.1 13.1 96.6 25.9 92.4 38.3 99.8 41.3 93.5 54 85.7 65.7 79.3 60.9 70.7 70.7 60.9 79.3 65.7 85.7 54 93.5 41.3 99.8 38.3 92.4 25.9 96.6 13.1 99.1 14.1 107.1 0 108 -14.1 107.1-13.1 99.1-25.9 96.6 -38.3 92.4-41.3 99.8-54 93.5 -65.7 85.7-60.9 79.3-70.7 70.7 -79.3 60.9-85.7 65.7-93.5 54 -99.8 41.3-92.4 38.3-96.6 25.9 -99.1 13.1-107.1 14.1-108 0 -107.1-14.1-99.1-13.1-96.6-25.9 -92.4-38.3-99.8-41.3-93.5-54 -85.7-65.7-79.3-60.9-70.7-70.7 -60.9-79.3-65.7-85.7-54-93.5 -41.3-99.8-38.3-92.4-25.9-96.6 -13.1-99.1-14.1-107.1 0-108 14.1-107.1 13.1-99.1 25.9-96.6 38.3-92.4 41.3-99.8 54-93.5 65.7-85.7 60.9-79.3 70.7-70.7 79.3-60.9 85.7-65.7 93.5-54 99.8-41.3 92.4-38.3 96.6-25.9 99.1-13.1 107.1-14.1 108 0 107.1 14.1 99.1 13.1 96.6 25.9 92.4 38.3 99.8 41.3 93.5 54 85.7 65.7 79.3 60.9 70.7 70.7 60.9 79.3 65.7 85.7 54 93.5 41.3 99.8 38.3 92.4 25.9 96.6 13.1 99.1 14.1 107.1 0 108 -14.1 107.1-13.1 99.1-25.9 96.6 -38.3 92.4-41.3 99.8-54 93.5 -65.7 85.7-60.9 79.3-70.7 70.7 -79.3 60.9-85.7 65.7-93.5 54 -99.8 41.3-92.4 38.3-96.6 25.9 -99.1 13.1-107.1 14.1-108 0 -107.1-14.1-99.1-13.1-96.6-25.9 -92.4-38.3-99.8-41.3-93.5-54 -85.7-65.7-79.3-60.9-70.7-70.7 -60.9-79.3-65.7-85.7-54-93.5 -41.3-99.8-38.3-92.4-25.9-96.6 -13.1-99.1-14.1-107.1 0-108 14.1-107.1 13.1-99.1 25.9-96.6 38.3-92.4 41.3-99.8 54-93.5 65.7-85.7 60.9-79.3 70.7-70.7" style="fill:yellow;stroke:black; stroke-width:4"/>
</svg>
</div>

3 个回答

Voted

zhurof · Answer 1 · 2022-02-13T16:19:34Z

调整：
radiusin smallZoom- 原始图像的缩进，
radiusin bigZoom- 光晕的厚度

body {
  background-color: blue;
}

#placeholder {
  width: 300px;
  height: 300px;
}

h1 {
  font-size: 150px;
  text-align: center;
  filter: url(#galo);
  margin: 0;
}

<h1>Lorem</h1>
<svg id="placeholder" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="galo">              
                <feMorphology operator="dilate" radius="5" result="smallZoom"/>
                <feMorphology operator="dilate" radius="2" result="bigZoom"/>
                <feFlood flood-color="white" result="whiteBg"/>
                <feComposite in="bigZoom" in2="smallZoom" operator="out" result="galo"/>
                <feComposite in="whiteBg" in2="galo" operator="in" result="whiteGalo"/>
                <feMerge>
                    <feMergeNode in="whiteGalo"/>                   
                    <feMergeNode in="SourceGraphic"/>                   
                </feMerge>
            </filter>
        </defs>
        <path d="m175.9 53.4c12.4 4.2 15.4-3.2 28.1 3.1 11.7 7.8 6.9 14.2 16.7 22.8 8.6 9.8 15 5 22.8 16.7 6.3 12.7-1.1 15.7 3.1 28.1 2.5 12.8 10.5 11.8 11.4 25.9-0.9 14.1-8.9 13.1-11.4 25.9-4.2 12.4 3.2 15.4-3.1 28.1-7.8 11.7-14.2 6.9-22.8 16.7-9.8 8.6-5 15-16.7 22.8-12.7 6.3-15.7-1.1-28.1 3.1-12.8 2.5-11.8 10.5-25.9 11.4-14.1-0.9-13.1-8.9-25.9-11.4-12.4-4.2-15.4 3.2-28.1-3.1-11.7-7.8-6.9-14.2-16.7-22.8-8.6-9.8-15-5-22.8-16.7-6.3-12.7 1.1-15.7-3.1-28.1-2.5-12.8-10.5-11.8-11.4-25.9 0.9-14.1 8.9-13.1 11.4-25.9 4.2-12.4-3.2-15.4 3.1-28.1 7.8-11.7 14.2-6.9 22.8-16.7 9.8-8.6 5-15 16.7-22.8 12.7-6.3 15.7 1.1 28.1-3.1 12.8-2.5 11.8-10.5 25.9-11.4 14.1 0.9 13.1 8.9 25.9 11.4 12.4 4.2 15.4-3.2 28.1 3.1 11.7 7.8 6.9 14.2 16.7 22.8 8.6 9.8 15 5 22.8 16.7 6.3 12.7-1.1 15.7 3.1 28.1 2.5 12.8 10.5 11.8 11.4 25.9-0.9 14.1-8.9 13.1-11.4 25.9-4.2 12.4 3.2 15.4-3.1 28.1-7.8 11.7-14.2 6.9-22.8 16.7-9.8 8.6-5 15-16.7 22.8-12.7 6.3-15.7-1.1-28.1 3.1-12.8 2.5-11.8 10.5-25.9 11.4-14.1-0.9-13.1-8.9-25.9-11.4-12.4-4.2-15.4 3.2-28.1-3.1-11.7-7.8-6.9-14.2-16.7-22.8-8.6-9.8-15-5-22.8-16.7-6.3-12.7 1.1-15.7-3.1-28.1-2.5-12.8-10.5-11.8-11.4-25.9 0.9-14.1 8.9-13.1 11.4-25.9 4.2-12.4-3.2-15.4 3.1-28.1 7.8-11.7 14.2-6.9 22.8-16.7 9.8-8.6 5-15 16.7-22.8 12.7-6.3 15.7 1.1 28.1-3.1 12.8-2.5 11.8-10.5 25.9-11.4 14.1 0.9 13.1 8.9 25.9 11.4 12.4 4.2 15.4-3.2 28.1 3.1 11.7 7.8 6.9 14.2 16.7 22.8" fill="green" stroke="#000" stroke-width="4" filter="url(#galo)" />
</svg>

Alexandr_TT · Answer 2 · 2022-02-14T19:36:41Z

SVG过滤器组合的一个稍微不同的变体，但在文本或svg图像周围形成光环轮廓的基础是相同的，png

<feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="2" result="e2" />

筛选

 <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 1 0" result="outline2"/>

提供轮廓的颜色，在这种情况下，当R=G=B=1时，边框的颜色为白色

＃一。将过滤器应用于 SVG 文本和形状的选项

<style>
div {
background-color: blue;
}
</style>
<div>
<svg id="placeholder" width="600" height="600" version="1.1" viewBox="-120 -120 240 240" preserveAspectRatio="none" > 
   <defs>
    <filter id="groupborder" 
            x="-20%" y="-20%" width="200%" height="200%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="2" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
  <path filter="url(#groupborder)" transform="scale(.7)" d="M25.9-96.6C38.3-92.4 41.3-99.8 54-93.5 65.7-85.7 60.9-79.3 70.7-70.7 79.3-60.9 85.7-65.7 93.5-54 99.8-41.3 92.4-38.3 96.6-25.9 99.1-13.1 107.1-14.1 108 0 107.1 14.1 99.1 13.1 96.6 25.9 92.4 38.3 99.8 41.3 93.5 54 85.7 65.7 79.3 60.9 70.7 70.7 60.9 79.3 65.7 85.7 54 93.5 41.3 99.8 38.3 92.4 25.9 96.6 13.1 99.1 14.1 107.1 0 108 -14.1 107.1-13.1 99.1-25.9 96.6 -38.3 92.4-41.3 99.8-54 93.5 -65.7 85.7-60.9 79.3-70.7 70.7 -79.3 60.9-85.7 65.7-93.5 54 -99.8 41.3-92.4 38.3-96.6 25.9 -99.1 13.1-107.1 14.1-108 0 -107.1-14.1-99.1-13.1-96.6-25.9 -92.4-38.3-99.8-41.3-93.5-54 -85.7-65.7-79.3-60.9-70.7-70.7 -60.9-79.3-65.7-85.7-54-93.5 -41.3-99.8-38.3-92.4-25.9-96.6 -13.1-99.1-14.1-107.1 0-108 14.1-107.1 13.1-99.1 25.9-96.6 38.3-92.4 41.3-99.8 54-93.5 65.7-85.7 60.9-79.3 70.7-70.7 79.3-60.9 85.7-65.7 93.5-54 99.8-41.3 92.4-38.3 96.6-25.9 99.1-13.1 107.1-14.1 108 0 107.1 14.1 99.1 13.1 96.6 25.9 92.4 38.3 99.8 41.3 93.5 54 85.7 65.7 79.3 60.9 70.7 70.7 60.9 79.3 65.7 85.7 54 93.5 41.3 99.8 38.3 92.4 25.9 96.6 13.1 99.1 14.1 107.1 0 108 -14.1 107.1-13.1 99.1-25.9 96.6 -38.3 92.4-41.3 99.8-54 93.5 -65.7 85.7-60.9 79.3-70.7 70.7 -79.3 60.9-85.7 65.7-93.5 54 -99.8 41.3-92.4 38.3-96.6 25.9 -99.1 13.1-107.1 14.1-108 0 -107.1-14.1-99.1-13.1-96.6-25.9 -92.4-38.3-99.8-41.3-93.5-54 -85.7-65.7-79.3-60.9-70.7-70.7 -60.9-79.3-65.7-85.7-54-93.5 -41.3-99.8-38.3-92.4-25.9-96.6 -13.1-99.1-14.1-107.1 0-108 14.1-107.1 13.1-99.1 25.9-96.6 38.3-92.4 41.3-99.8 54-93.5 65.7-85.7 60.9-79.3 70.7-70.7" style="fill:#E4B90B;stroke:black; stroke-width:4"/>
 
  <text filter="url(#groupborder)" x="-32" y="12" font-size="2em" font-weight="700" fill="black">TeXt</text>
</svg> 
</div>

#2。将过滤器应用于 PNG 图像的选项

当图像的主要颜色匹配或接近周围背景时，非常方便地框出光晕形状。

<style>
.container {
width:50vw;
height:auto;
background-color: #111;
}
</style>
<div class="container">
<svg id="placeholder"  viewBox="0 0 300 400"  > 
   <defs>
    <filter id="groupborder" 
            x="-20%" y="-20%" width="200%" height="200%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="10" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
   <image filter="url(#groupborder)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" />
 
  </svg> 
</div>

不同的背景颜色

<style>
.container {
width:50vw;
height:auto;
background-color: dodgerblue;
}
</style>
<div class="container">
<svg id="placeholder"  viewBox="0 0 300 400"  > 
   <defs>
    <filter id="groupborder" 
            x="-20%" y="-20%" width="200%" height="200%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="10" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
   <image filter="url(#groupborder)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" />
 
  </svg> 
</div>

Alexandr_TT · Answer 3 · 2022-02-14T20:26:58Z

我有一个想法，如果你将两个位图组合成一个 SVG 组并对其应用过滤器，那么框架将环绕每个位图或它们的总值。

第二张图片缩小了一半，以创建一个母亲的图像，她的腿上放着一只小企鹅。

 <g filter="url(#groupborder)">
   <image  xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" />
     <image   transform="scale(0.5) translate(300 200)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" />
     </g>

<style>
.container {
width:50vw;
height:auto;
background-color: dodgerblue;
}
</style>
<div class="container">
<svg id="placeholder"  viewBox="0 0 400 400"  > 
   <defs>
    <filter id="groupborder" 
            x="-20%" y="-20%" width="200%" height="200%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="10" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 0 1
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs> 
     <g filter="url(#groupborder)">
   <image  xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" />
     <image   transform="scale(0.5) translate(300 200)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" />
     </g>
 
  </svg> 
</div>

如何在 SVG 中围绕图像制作光环轮廓？

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

如何在 SVG 中围绕图像制作光环轮廓？

3 个回答

相关问题