首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何使 SVG 笔画显示背景

我有一个SVG，有一个类似渐变的背景和一个前景图标.目前，图标只是一条顶部有多段线的填充路径，但可以将其拆分为多条路径，其中多段线就是笔划.但是，我想让它们显示背景，而不是多段线/笔划有 colored颜色 ，就像它在前景中切割了一个孔一样.由于背景是渐变色(实际上是一个阴影滤镜)而不是纯色，我不能用与背景 colored颜色 相同的笔划来实现这一点.这就是我想象的结果，如果我在多条路径上有一个负的笔划宽度.

作为一个例子，我将使用SVG(我的个人资料图片) 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" stroke="black" fill="rgb(95,95,95)" viewBox="-30 -30 276 260" width="276" height="260" stroke-width="4">
  <defs>
    <filter id="shadow" x="-30" y="-30" width="276" height="260">
      <feGaussianBlur in="SourceAlpha" out="blurOut" stdDeviation="32"/>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
    </filter>
  </defs>

  <rect x="-30" y="-30" width="276" height="260" fill="#c41313" stroke="none"/>
  <path d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" filter="url(#shadow)"/>
  <g fill="none">
    <polyline points="82 166, 108 179, 135 166"/>
    <polyline points="54 130, 108 157, 162 130"/>
    <polyline points="0 54, 108 108, 216 54"/>
    <polyline points="49 78.5, 108 49, 167 78.5"/>
    <line x1="108" y1="0" x2="108" y2="49"/>
    <line x1="108" y1="200" x2="108" y2="108"/>
  </g>
</svg>
I would like, instead of the black outline, it to be a gap in the icon, like this. Of course, for this particular image, I could just manually make each section- separated by the black outlines- have it's own path without a stroke, re-creating the effect, but due to how I am using this image, I need the stroke-width to be variable, and having specific paths would not allow for this, unless there were a way to automatically generate these paths in Javascript or PHP but I wouldn't know how to implement this. The only way I can think of getting around this would be to find the centres of each section and increase a grey outline to decrease the gap (so a maximum gap would be a stroke-width of 0 and a minimum gap would have a stroke-width equivalent to the radius of each section), but for my situation this would still not be effective. So what alternatives are there?

推荐答案

你可以用绿屏技术在一个过滤器中实现这一点.您可以将外部和内部线条设置为纯蓝色和绿色，然后使用 colored颜色 矩阵将其 Select 为单独的层，然后将其与原始形状合成/分离.使用shape rendering=CrispEdge很重要，因为如果不这样做，就会出现反走样瑕疵.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" stroke="black" fill="rgb(95,95,95)" viewBox="-30 -30 276 260" width="276" height="260" stroke-width="4" color-interpolation-filters="sRGB" shape-rendering="crispEdges">
  <defs>
    <filter id="green-screen" x="-30" y="-30" width="276" height="260">
      <feColorMatrix type="matrix" values="0 0 0 0 0  0 2 0 0 -1  0 0 0 0 0  -1 2 -1 0 -1" result="exterior-line"/>
     <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0   0 0 0 0 0  0 0 2 0 -1  -1 -1 2 0 -1" result="interior-line"/>
      
      <feComposite operator="out" in="SourceGraphic" in2="exterior-line"/>
      <feComposite operator="out"  in2="interior-line" result="masked-shape"/>
      
      <feGaussianBlur in="SourceAlpha" out="blurOut" stdDeviation="32"/>
      <feComposite operator="over" in="masked-shape"/>
    </filter>
  </defs>

  <rect x="-30" y="-30" width="276" height="260" fill="#c41313" stroke="none"/>
  <g filter="url(#green-screen)">
  <path d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" stroke="rgb(0,255,0)"/>
  <g fill="none" stroke="rgb(0,0,255)">
    <polyline points="82 166, 108 179, 135 166"/>
    <polyline points="54 130, 108 157, 162 130"/>
    <polyline points="0 54, 108 108, 216 54"/>
    <polyline points="49 78.5, 108 49, 167 78.5"/>
    <line x1="108" y1="0" x2="108" y2="49"/>
    <line x1="108" y1="200" x2="108" y2="108"/>
  </g>
  </g>
</svg>

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

Chrome和Safari浏览器中的CSS3动画不同

如何才能只给没有孟加拉语Kar符号的字母上色？

仅在加载视频时显示描述(<；Video>；标签)

如何在html和css中创建动态调整大小的表元素

使用响应迅速的网格系统，将两列保持在同一行，同时允许更多列用于更大的屏幕

浏览器是否可以呈现存储在代码点0x09处的字形？

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

使用修饰键微调 HTML 输入范围中的值

文本不显示在 div 下方

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白？

Angular：从服务器下载 HTML 并打印

修复 Vue 3 Component 中的 CSS 以显示后面的 Select 器样式而无需 ！important

在