如何在SVG <path>中添加阴影？
如何在SVG <path>中添加阴影？
提问于 2020-12-12 17:48:21
我想为从库中生成的SVG中的一些路径创建一个简单的阴影效果。我已经有效地使用<feDropShadow>向<rect>等其他SVG元素添加阴影，但是对<path>应用相同的阴影似乎要么使其消失，要么没有效果。
作为参考，下面是我使用的简单过滤器：
<filter id="${id}">
<feDropShadow dx="0" dy="0"
flood-color="${color}" />
</filter>然后选择相关的SVG元素并将其附加到其样式属性：filter: url(#filter-id)。
如前所述，这在应用于<rect>时可以很好地工作，但不适用于<path>。另外，仅供参考，我试图实现的是使SVG图形的特定部分“发光”，以表示它被选中。我还会提到我的目标浏览器是google chrome，因为浏览器在SVG规范的实现上似乎有很大的不同。
如果有人能帮我弄清楚如何达到预期的效果，我将不胜感激！
编辑:我意识到如果我包含有问题的SVG可能会有所帮助，因为我得到的最有用的答案似乎并不适用于它。我希望我能提供一个更小的例子，但这是我能做到的最小的例子。为了提供上下文，除了我附加到内部HTML的两个过滤器之外，所有SVG都是使用mermaid-js库在页面中动态生成的，这两个过滤器应该用于在web页面上触发事件时“突出显示”svg的相关部分。我将这些过滤器应用于相关元素，方法是将filter: url(#filter-id)附加到其样式属性。当我将它应用于包含a的时，这确实有效，但当我将其应用于包含a的或直接应用于有问题的时，则不起作用。
在代码片段中，图中的一个节点被成功高亮显示，由id为"flowchart-a-14“的表示。过滤器还应用于alpha和bravo节点之间的箭头，该箭头由id为"L-a-b“的表示，而不是高亮显示，而是消失。
注1:行为使用的是google chrome，它是目标浏览器。注2:似乎不能包含可运行的代码段。调出代码片段编辑器的按钮不会出现在我面前。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mermaid-access-0" width="100%" height="50.720001220703125" style="max-width: 350.6000061035156px;" viewBox="0 0 350.6000061035156 50.720001220703125">
<style>#mermaid-access-0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-access-0 .error-icon{fill:#552222;}#mermaid-access-0 .error-text{fill:#552222;stroke:#552222;}#mermaid-access-0 .edge-thickness-normal{stroke-width:2px;}#mermaid-access-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-access-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-access-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-access-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-access-0 .marker{fill:#333333;}#mermaid-access-0 .marker.cross{stroke:#333333;}#mermaid-access-0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-access-0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-access-0 .label text{fill:#333;}#mermaid-access-0 .node rect,#mermaid-access-0 .node circle,#mermaid-access-0 .node ellipse,#mermaid-access-0 .node polygon,#mermaid-access-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-access-0 .node .label{text-align:center;}#mermaid-access-0 .node.clickable{cursor:pointer;}#mermaid-access-0 .arrowheadPath{fill:#333333;}#mermaid-access-0 .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-access-0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-access-0 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-access-0 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-access-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-access-0 .cluster text{fill:#333;}#mermaid-access-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80,100%,96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-access-0:root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-access-0 flowchart{fill:apa;}</style>
<g>
<g class="output">
<g class="clusters"/>
<g class="edgePaths">
<g class="edgePath LS-a LE-b" id="L-a-b" style="opacity: 1;filter:url(#mermaid-access-highlight-secondary);">
<path class="path" d="M59.349998474121094,25.360000610351562L102.30999946594238,25.360000610351562L145.27000045776367,25.360000610351562" marker-end="url(#arrowhead14)" style="fill:none"/>
<defs>
<marker id="arrowhead14" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/>
</marker>
</defs>
</g>
<g class="edgePath LS-b LE-c" id="L-b-c" style="opacity: 1;">
<path class="path" d="M197.2400016784668,25.360000610351562L240.2000026702881,25.360000610351562L283.1600036621094,25.360000610351562" marker-end="url(#arrowhead15)" style="fill:none"/>
<defs>
<marker id="arrowhead15" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/>
</marker>
</defs>
</g>
</g>
<g class="edgeLabels">
<g class="edgeLabel" transform="translate(102.30999946594238,25.360000610351562)" style="opacity: 1;">
<g transform="translate(-17.96000099182129,-7.360000133514404)" class="label">
<rect rx="0" ry="0" width="35.92000198364258" height="14.720000267028809"/>
<foreignObject width="44.900001525878906" height="18.399999618530273">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
<span id="L-L-a-b" class="edgeLabel L-LS-a' L-LE-b">Step 1</span>
</div>
</foreignObject>
</g>
</g>
<g class="edgeLabel" transform="translate(240.2000026702881,25.360000610351562)" style="opacity: 1;">
<g transform="translate(-17.96000099182129,-7.360000133514404)" class="label">
<rect rx="0" ry="0" width="35.92000198364258" height="14.720000267028809"/>
<foreignObject width="44.900001525878906" height="18.399999618530273">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
<span id="L-L-b-c" class="edgeLabel L-LS-b' L-LE-c">Step 2</span>
</div>
</foreignObject>
</g>
</g>
</g>
<g class="nodes">
<g class="node default" id="flowchart-a-14" transform="translate(33.67499923706055,25.360000610351562)" style="opacity: 1;filter:url(#mermaid-access-highlight-primary);">
<rect rx="0" ry="0" x="-25.675000190734863" y="-17.360000133514404" width="51.35000038146973" height="34.72000026702881" class="label-container"/>
<g class="label" transform="translate(0,0)">
<g transform="translate(-15.675000190734863,-7.360000133514404)">
<foreignObject width="39.1875" height="18.399999618530273">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">alpha</div>
</foreignObject>
</g>
</g>
</g>
<g class="node default" id="flowchart-b-15" transform="translate(171.25500106811523,25.360000610351562)" style="opacity: 1;">
<rect rx="0" ry="0" x="-25.985000610351562" y="-17.360000133514404" width="51.970001220703125" height="34.72000026702881" class="label-container"/>
<g class="label" transform="translate(0,0)">
<g transform="translate(-15.985000610351562,-7.360000133514404)">
<foreignObject width="39.962501525878906" height="18.399999618530273">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">bravo</div>
</foreignObject>
</g>
</g>
</g>
<g class="node default" id="flowchart-c-16" transform="translate(312.88000106811523,25.360000610351562)" style="opacity: 1;">
<rect rx="0" ry="0" x="-29.719999313354492" y="-17.360000133514404" width="59.439998626708984" height="34.72000026702881" class="label-container"/>
<g class="label" transform="translate(0,0)">
<g transform="translate(-19.719999313354492,-7.360000133514404)">
<foreignObject width="49.29999923706055" height="18.399999618530273">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">charlie</div>
</foreignObject>
</g>
</g>
</g>
</g>
</g>
</g>
<filter id="mermaid-access-highlight-primary">
<feDropShadow dx="0" dy="0" flood-color="red"/>
</filter>
<filter id="mermaid-access-highlight-secondary">
<feDropShadow dx="0" dy="0" flood-color="cyan"/>
</filter>
</svg>
回答 3
Stack Overflow用户
发布于 2020-12-12 22:43:18
作为OP的评论：
对于我的用例，有必要在用户与应用程序交互时动态地突出显示
的不同部分
也许是这样吧？
当您将鼠标悬停在应用程序的不同部分上时，它们将突出显示，并添加阴影。
此外，还添加了当悬停在SVG的不同部分上时出现的提示。
<a xlink:href="https://stackoverflow.com/questions/tagged/javascript">
<title> All javascript questions </title>
<path id="s2" d="M 55 55 L 90.35 90.35 A 50 50 0 0 1 55 105 Z"/>
</a> 添加了工作链接，在这些链接上可以过渡到stackoverflow的各个部分。
请阅读评论以帮助您了解解决方案的要点。
svg {
height: 330px;
width: 330px;
--d:dodgerblue;
--r:red;
--g:yellowgreen;
}
#spot {
fill:white;
pointer-events:none;
}
#arrow {
fill:none;
stroke:white;
stroke-width:2;
pointer-events:none;
}
#center {
fill:#797979;
stroke:#FFFFFF;
stroke-width:3;
cursor: pointer;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#center:hover {
fill: var(--g);
filter:url(#drop-shadow);
}
#s1,#s3, #s5, #s7 {
fill:#3A3A3A;
cursor: pointer;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#s2,#s4,#s6,#s8 {
fill:#797979;
cursor: pointer;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#s1:hover, #s3:hover, #s5:hover, #s7:hover {
fill: var(--d);
filter:url(#drop-shadow);
}
#s2:hover, #s4:hover, #s6:hover, #s8:hover {
fill: var(--r);
filter:url(#drop-shadow);
}<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 110 110'>
<defs>
<!-- Hover Drop Shadow Filter -->
<filter id="drop-shadow" x="-20%" y="-20%" height="130%" width="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="1" dy="0" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Circle segments with work links Click -->
<g transform="rotate(-22.5 55 55)" >
<a xlink:href="https://stackoverflow.com/questions">
<title> All questions </title>
<path id="s1" d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
</a>
<a xlink:href="https://stackoverflow.com/questions/tagged/javascript">
<title> All javascript questions </title>
<path id="s2" d="M 55 55 L 90.35 90.35 A 50 50 0 0 1 55 105 Z"/>
</a>
<a xlink:href="https://stackoverflow.com/questions/tagged/svg">
<title> All SVG Questions </title>
<path id="s3" d="M 55 55 L 55 105 A 50 50 0 0 1 19.6447 90.35 Z" />
</a>
<a xlink:href="https://stackoverflow.com/questions/tagged/css">
<title> All CSS Questions </title>
<path id="s4" d="M 55 55 L 19.64 90.353 A 50 50 0 0 1 5 55 Z" />
</a>
<a xlink:href="https://stackoverflow.com/questions/tagged/java">
<title> All java questions</title>
<path id="s5" d="M 55 55 L 5 55 A 50 50 0 0 1 19.64 19.64 Z" />
</a>
<a xlink:href="https://stackoverflow.com/questions/tagged/python">
<title> All python questions </title>
<path id="s6" d="M 55 55 L 19.64 19.64 A 50 50 0 0 1 55 5 Z" />
</a>
<a xlink:href="https://stackoverflow.com/help">
<title> Reference section </title>
<path id="s7" d="M 55 55 L 55 5 A 50 50 0 0 1 90.35 19.64 Z" />
</a>
<a xlink:href="https://stackoverflow.com/questions/tagged/php">
<title> All php questions </title>
<path id="s8" d="M 55 55 L 90.35 19.64 A 50 50 0 0 1 105 55 Z" />
</a>
</g>
<a xlink:href="https://stackoverflow.com/questions/tagged/html">
<title> All HTML questions </title>
<circle id="center" cx='55' cy='55' r='17' />
</a>
<!-- White circles -->
<circle id="spot" cx='31' cy='31' r='6' />
<use xlink:href="#spot" transform="rotate(90 55 55)" />
<use xlink:href="#spot" transform="rotate(-90 55 55)" />
<use xlink:href="#spot" transform="rotate(180 55 55)" />
<!--White arrows -->
<polyline id="arrow" points = "46,21 55,12 64,21" fill="none" stroke="white" />
<use xlink:href="#arrow" transform="rotate(90 55 55)" />
<use xlink:href="#arrow" transform="rotate(-90 55 55)" />
<use xlink:href="#arrow" transform="rotate(180 55 55)" />
</svg>
Stack Overflow用户
发布于 2020-12-14 20:07:20
这个是来自Alexander_TT的代码，他很好的回答。
我只是将它封装在Custom元素中(在所有现代浏览器中都支持)，因为它是SVG和Custom元素很好混合的一个很好的例子。
<svg-navigator colors="gold,goldenrod">
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 110'>
<defs><filter id='drop-shadow' x='-20%' y='-20%' height='130%' width='130%'>
<feGaussianBlur in='SourceAlpha' stdDeviation='2' />
<feOffset dx='1' dy='0' result='offsetblur' />
<feMerge><feMergeNode /><feMergeNode in='SourceGraphic' /></feMerge>
</filter></defs>
<g><!-- The <svg-navigator> Custom Element replaces all these A tags -->
<a href="">All questions</a>
<a href="/tagged/javascript">All JavaScript questions</a>
<a href="/tagged/css">All CSS questions</a>
<a href="/tagged/javascript">All SVG questions</a>
<a href="/tagged/web+components">All Web Components questions</a>
<a href="/tagged/custom+elements">All Custom Elements questions</a>
<a href="/tagged/javascript+template">All Template questions</a>
<a href="/tagged/shadowDOM">All shadowDOM questions</a>
</g>
<circle id='center' fill='#696969' stroke='white' stroke-width='3' cx='55' cy='55' r='17' />
</svg>
</svg-navigator>
<script>
customElements.define("svg-navigator", class extends HTMLElement {
connectedCallback() {
let colors = this.getAttribute("colors").split `,`;
let pointers = ["<circle cx='90' cy='70' r='6' fill='white'/>",
"<polyline points='90,60 95,70 85,75' fill='white'/>"];
setTimeout(() => // make sure DOM can be read
this.querySelector('G')
.innerHTML = [...this.querySelectorAll("A")].map((node, idx) =>
`<g transform='rotate(${idx*45-22.5} 55 55)'>` +
`<a href='https://stackoverflow.com/questions${node.href}''><title>${node.innerHTML}</title>` +
`<path fill='${colors[idx%2]}' id='s${idx+1}' d='M 55 55 L 105 55 A 50 50 0 0 1 90.5 90.5z'/>` +
`</a>${pointers[idx % 2]}</g>` // return segment
).join ``)}})
</script>
<style>
svg {
height: 200px;
width: 200px;
--d: dodgerblue;
--r: red;
--g: yellowgreen;
}
svg path,
#center {
cursor: pointer;
transition: all 0.8s ease;
}
#center:hover {
fill: var(--g);
filter: url(#drop-shadow);
}
#s1:hover,
#s3:hover,
#s5:hover,
#s7:hover {
fill: var(--d);
filter: url(#drop-shadow);
}
#s2:hover,
#s4:hover,
#s6:hover,
#s8:hover {
fill: var(--r);
filter: url(#drop-shadow);
}
</style>
Stack Overflow用户
发布于 2020-12-12 18:28:35
使用常规CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
但是它适用于SVG中的所有元素，您不能只针对一个SVG元素。
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
<path d='M7 15h2v-2h-2v2zm1-14a4 4 90 00-4 4h2c0-1 1-2 2-2s2 1 2 2c0 2-3 2-3 6h2c0-3 3-3 3-6a4 4 90 00-4-4z'/>
</svg>
<style>
svg {
width: 200px;
filter: drop-shadow(0 0 20px red);
}
</style>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65263535
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号