svg 相关问题

Jest 中可以处理带问号的导入吗？

在 JS/Webpack/Jest 项目中，我尝试使用以下语法导入 SVG 文件： 从 './image.svg?url 导入 imageUrl （SVGR 在其文档中推荐了这种样式。） 然而，当我

当在正确设置了 z-index 的浏览器上显示文本时，html2canvas 不会在 SVG 上渲染文本

我正在使用 html2canvas 来生成和保存海报。我目前有一个不透明度为 1 且 z-index:1 的自定义 SVG 对象。最重要的是，我有 MaterialUI 的 Typography 和正常的 ... 我正在使用 html2canvas 来生成和保存海报。我目前有一个不透明度为 1 且 z-index:1 的自定义 SVG 对象。最重要的是，我有 MaterialUI's Typography 和普通 <h1> 标签，z-index 设置为更高的值。当我下载图像时，但是文本没有出现。 令人惊讶的是，当我将自定义 SVG 对象的不透明度设置为 0.5 时，我可以看到仍然存在的文本。我相信这可能是 z-index 没有正确应用的情况。 请提供任何建议！代码块如下。 海报 <Box sx={{ zIndex: 5, justifyContent: "flex-start", backgroundColor: "rgba(0, 0, 0, 0)", width: "90%", height: "35%", padding: "1rem", marginTop: "800px", overflow: "hidden", }} > <h1 > {donationDetails.startDate} </h1> <Typography color="white" variant="h1" gutterBottom sx = {{zIndex: 5000}} > {donationDetails.startDate} </Typography> <Typography color="white" variant="h2" gutterBottom > {donationDetails.name} </Typography> <Typography color="white" variant="h3" gutterBottom > {donationDetails.location} </Typography> <Typography color="white" variant="h3" gutterBottom > {donationDetails.donationItems} </Typography> </Box> <BasicOutline style={{ position: "absolute", zIndex: 1, }} /> 手柄下载代码 const handleDownload = () => { const box = document.getElementById('poster-box'); if (!box) return; html2canvas(box) .then(canvas => { const dataURL = canvas.toDataURL(); const link = document.createElement('a'); link.href = dataURL; link.download = 'poster.png'; link.click(); }); }; 通过在此链接此处添加position:relative解决了这个问题 <Box sx={{ justifyContent: "flex-start", backgroundColor: "rgba(0, 0, 0, 0)", width: "90%", height: "35%", padding: "1rem", marginTop: "800px", overflow: "hidden", zIndex: "5000", **position:"relative"** }} >

未捕获错误：元素类型无效：需要一个字符串，但得到：数字 - Expo - SVG 图标

我在我的世博项目中使用 Typescript 使用 SVG 图标， 所有 SVG 图标都已成功加载，但我不知道我做了什么，突然我开始在所有平台上收到此错误。 错误：

在javascript中将svg路径转换为多边形

我正在尝试将 svg 路径转换为 javascript 中的 svg 多边形。我发现这个函数可以沿着路径爬行并提取其坐标。 var length = path.getTotalLength(); var p=路径。

如何为具有线性渐变和不透明度的元素添加边框？

我需要向我的元素添加一个边框作为线性渐变颜色，并将颜色与当前背景颜色混合： html，正文{ 背景颜色：#131519； } 。盒子 { 宽度：200px；

如何从不属于 DOM 一部分的 css / javascript 访问和修改静态提供的 SVG？

我正在使用 SVG 在我的网站上绘制自定义光标。我需要在单击时播放特殊的动画，为此我需要能够编辑 SVG 内的属性。因此问题是：是吗

SVG 可以有多小？

我刚刚缩小了这个SVG： 我刚刚缩小了这个 SVG： <?xml version="1.0" standalone="no"?> <svg viewBox="0 0 480 150" style="background-color:#ffffff00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="480" height="150"> <path d="M 0 35.5 L 6.5 22.5 L 16 37 L 23 24 L 34.8 43.7 L 42.5 30 L 50.3 47 L 59.7 27.7 L 69 47 L 85 17.7 L 98.3 39 L 113 9.7 L 127.7 42.3 L 136.3 23.7 L 147 44.3 L 158.3 20.3 L 170.3 40.3 L 177.7 25.7 L 189.7 43 L 199.7 21 L 207.7 35 L 219 11 L 233 37 L 240.3 23.7 L 251 43 L 263 18.3 L 272.7 33.3 L 283 10 L 295 32.3 L 301.3 23 L 311.7 37 L 323.7 7.7 L 339.3 39 L 346.3 25.7 L 356.3 42.3 L 369.7 15 L 376.3 25.7 L 384 9 L 393 28.3 L 400.3 19 L 411.7 38.3 L 421 21 L 434.3 43 L 445 25 L 453 36.3 L 464.3 18.3 L 476.2 40.3 L 480 33.5 L 480 215 L 0 215 L 0 35.5 Z" fill="#175720"/> </svg> 对此： <svg height="150" width="480"><path d="m0 35.5l6.5-13 9.5 14.5 7-13 11.8 19.7 7.7-13.7 7.8 17 9.4-19.3 9.3 19.3 16-29.3 13.3 21.3 14.7-29.3 14.7 32.6 8.6-18.6 10.7 20.6 11.3-24 12 20 7.4-14.6 12 17.3 10-22 8 14 11.3-24 14 26 7.3-13.3 10.7 19.3 12-24.7 9.7 15 10.3-23.3 12 22.3 6.3-9.3 10.4 14 12-29.3 15.6 31.3 7-13.3 10 16.6 13.4-27.3 6.6 10.7 7.7-16.7 9 19.3 7.3-9.3 11.4 19.3 9.3-17.3 13.3 22 10.7-18 8 11.3 11.3-18 11.9 22 3.8-6.8v181.5h-480v-179.5z" fill="#175720"/></svg> （我通过最小化程序运行它，然后删除了 <svg> 标签中的一堆属性。）我将它用作背景图像，它似乎在 Windows 上的 IE、Firefox 和 Chrome 中工作正常。我只是想知道如果其他信息对图像外观没有影响的话，它在那里做什么。因为我删除了该信息，会在某个地方出现兼容性问题吗？ 更新： 我发现实际上，对于我的用例，我需要有 xmlns="http://www.w3.org/2000/svg"，否则它不会在 IE 或 Chrome 中呈现。 删除 viewBox 会产生显着的语义差异，因为 SVG 将不再缩放（即响应 UA 调整大小）。这仅适用于您直接查看图像的情况，但如果您将其作为背景图像查看或通过 SVG <image> 标签或 html <img> 标签查看，则 SVG 将被绘制为好像它具有 viewBox 为“0 0 宽度高度”，除非 viewBox 已经存在。 删除 background-color 将意味着 SVG 当放置在其他东西之上时将不再是不透明的。当然，如果你不这样做，你可能不会注意到。 仅当 SVG 文件中有文本元素时，xml:space 属性才重要。 如果 SVG 是内联的，其余的删除都是良性的。如果 SVG 是独立文件，则需要命名空间属性，但背景图像就是这种情况。 简化版本不是有效的 SVG。它将被视为“任何”恰好具有名称为“svg”的根元素的 XML。 要将片段转换为 the SVG，只有一个选项： 将具有正确命名空间的 xmlns 属性添加到 svg 元素（正如您所发现的） 不再建议在文档中添加 DOCTYPE，并且从 Chrome 53 起就不起作用。将文档作为 MIME 类型 image/svg+xml 提供服务也不够。 示例： <svg xmlns="http://www.w3.org/2000/svg">（消费者选择的SVG版本） <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">（适用于 SVG 1.0） 使用W3验证器检查您的文件。请务必检查检测到的文档类型是否为 SVG，因为该文档可能仍然有效，但作为一般/未知的 XML。 -- 他们还有测试页面。

使用成帧器运动的 svg 动画

我需要创建这个基本形状和那些弯曲的灰线，这些灰线应该始终存在，因为它们是静态的，并且在这些灰线之上应该无限地流动蓝色球......

WPF自定义控件路径，可点击背景

我想创建一个按钮或具有以下形式/路径的东西： 我想创建一个按钮或具有以下形式/路径的东西： <Viewbox Stretch="Uniform" x:Name="vboxSilo" > <Viewbox.ContextMenu> <ContextMenu> <MenuItem Header="T1"></MenuItem> </ContextMenu> </Viewbox.ContextMenu> <Path x:Name="pathSilo" Stretch="Uniform" Stroke="Black" Fill="Black" Data="M117.244 16.121 C 115.736 18.039,115.624 19.202,115.609 33.113 L 115.592 48.047 65.763 74.807 C 38.357 89.525,15.512 101.988,14.998 102.502 C 13.090 104.410,13.708 382.458,15.625 384.375 C 17.179 385.929,18.229 385.938,199.943 385.938 L 382.699 385.938 384.344 383.846 L 385.989 381.755 385.755 306.307 L 385.522 230.859 383.759 224.609 C 375.298 194.617,354.402 176.774,320.508 170.603 L 318.750 170.283 318.750 137.351 C 318.750 107.891,318.615 104.270,317.465 103.000 C 316.759 102.220,293.739 89.536,266.309 74.814 L 216.437 48.047 216.422 32.617 C 216.401 11.508,223.333 14.063,166.072 14.063 L 118.863 14.063 117.244 16.121 M204.688 35.938 L 204.688 46.094 166.016 46.094 L 127.344 46.094 127.344 35.938 L 127.344 25.781 166.016 25.781 L 204.688 25.781 204.688 35.938 M245.938 77.068 C 266.434 88.088,284.609 97.928,286.328 98.935 L 289.453 100.766 166.016 100.766 L 42.578 100.766 83.203 78.916 L 123.828 57.066 166.250 57.049 L 208.672 57.031 245.938 77.068 M62.500 243.359 L 62.500 374.219 44.141 374.219 L 25.781 374.219 25.781 243.359 L 25.781 112.500 44.141 112.500 L 62.500 112.500 62.500 243.359 M116.406 123.828 L 116.406 135.156 95.313 135.156 L 74.219 135.156 74.219 123.828 L 74.219 112.500 95.313 112.500 L 116.406 112.500 116.406 123.828 M307.813 141.323 C 307.813 172.904,308.094 171.094,303.186 171.094 C 279.697 171.094,251.388 195.700,242.808 223.573 L 241.046 229.297 240.812 302.148 L 240.579 375.000 184.352 375.000 L 128.125 375.000 128.125 243.750 L 128.125 112.500 217.969 112.500 L 307.813 112.500 307.813 141.323 M116.406 157.422 L 116.406 168.750 95.313 168.750 L 74.219 168.750 74.219 157.422 L 74.219 146.094 95.313 146.094 L 116.406 146.094 116.406 157.422 M116.406 191.797 L 116.406 203.125 95.313 203.125 L 74.219 203.125 74.219 191.797 L 74.219 180.469 95.313 180.469 L 116.406 180.469 116.406 191.797 M327.023 183.586 C 350.979 189.613,369.816 209.984,373.808 234.180 L 374.356 237.500 313.350 237.500 L 252.344 237.500 252.344 235.672 C 252.344 229.014,257.593 215.950,263.694 207.422 C 277.988 187.441,303.773 177.736,327.023 183.586 M116.406 226.172 L 116.406 237.500 95.313 237.500 L 74.219 237.500 74.219 226.172 L 74.219 214.844 95.313 214.844 L 116.406 214.844 116.406 226.172 M116.406 260.547 L 116.406 271.875 95.313 271.875 L 74.219 271.875 74.219 260.547 L 74.219 249.219 95.313 249.219 L 116.406 249.219 116.406 260.547 M375.000 311.719 L 375.000 374.219 313.281 374.219 L 251.563 374.219 251.563 311.719 L 251.563 249.219 313.281 249.219 L 375.000 249.219 375.000 311.719 M350.781 277.344 C 349.408 278.717,349.219 279.948,349.219 287.500 C 349.219 297.374,350.132 299.219,355.021 299.219 C 359.691 299.219,360.938 296.645,360.938 287.004 C 360.938 277.642,359.966 275.781,355.078 275.781 C 353.385 275.781,351.749 276.376,350.781 277.344 M97.754 283.594 L 116.406 283.594 116.406 294.922 L 116.406 306.250 95.313 306.250 L 74.219 306.250 74.219 294.434 L 74.219 282.617 76.660 283.105 C 78.003 283.374,87.495 283.594,97.754 283.594 M351.355 309.371 L 349.219 311.051 349.219 332.695 C 349.219 357.424,349.304 357.813,354.732 357.813 C 360.903 357.813,360.938 357.675,360.938 333.290 C 360.938 314.059,360.799 311.725,359.570 310.245 C 357.484 307.733,353.919 307.353,351.355 309.371 M116.406 328.906 L 116.406 340.625 95.313 340.625 L 74.219 340.625 74.219 328.906 L 74.219 317.188 95.313 317.188 L 116.406 317.188 116.406 328.906 M116.406 363.281 L 116.406 375.000 95.313 375.000 L 74.219 375.000 74.219 363.281 L 74.219 351.563 95.313 351.563 L 116.406 351.563 116.406 363.281 " /> </Viewbox> 它可以工作，但是上下文菜单仅在您单击轮廓或路径时才会触发... 如何使背景也可点击？ 我还希望能够更改形状内的背景颜色... 我尝试了几种容器类型并使用了 Clip 属性，但不起作用。 我还尝试了几种容器类型，但背景和按钮最终从所需的形状中突出。 提前致谢 如果您希望路径可扩展，那么需要将其放置在固定大小的容器中，否则它将尝试占用尽可能多的屏幕空间。 要使对象可点击，背景需要设置为默认空值以外的值。要与父背景保持相同，请使用透明。 此布局无需使用 ViewBox 控件。 <Grid Width="50" Height="50" Background="Transparent"> <Grid.ContextMenu> <ContextMenu> <MenuItem Header="T1"></MenuItem> </ContextMenu> </Grid.ContextMenu> <Path x:Name="pathSilo" Stretch="Uniform" Stroke="Black" Fill="Black" Data="M117.244 16.121 C 115.736 18.039,115.624 19.202,115.609 33.113 L 115.592 48.047 65.763 74.807 C 38.357 89.525,15.512 101.988,14.998 102.502 C 13.090 104.410,13.708 382.458,15.625 384.375 C 17.179 385.929,18.229 385.938,199.943 385.938 L 382.699 385.938 384.344 383.846 L 385.989 381.755 385.755 306.307 L 385.522 230.859 383.759 224.609 C 375.298 194.617,354.402 176.774,320.508 170.603 L 318.750 170.283 318.750 137.351 C 318.750 107.891,318.615 104.270,317.465 103.000 C 316.759 102.220,293.739 89.536,266.309 74.814 L 216.437 48.047 216.422 32.617 C 216.401 11.508,223.333 14.063,166.072 14.063 L 118.863 14.063 117.244 16.121 M204.688 35.938 L 204.688 46.094 166.016 46.094 L 127.344 46.094 127.344 35.938 L 127.344 25.781 166.016 25.781 L 204.688 25.781 204.688 35.938 M245.938 77.068 C 266.434 88.088,284.609 97.928,286.328 98.935 L 289.453 100.766 166.016 100.766 L 42.578 100.766 83.203 78.916 L 123.828 57.066 166.250 57.049 L 208.672 57.031 245.938 77.068 M62.500 243.359 L 62.500 374.219 44.141 374.219 L 25.781 374.219 25.781 243.359 L 25.781 112.500 44.141 112.500 L 62.500 112.500 62.500 243.359 M116.406 123.828 L 116.406 135.156 95.313 135.156 L 74.219 135.156 74.219 123.828 L 74.219 112.500 95.313 112.500 L 116.406 112.500 116.406 123.828 M307.813 141.323 C 307.813 172.904,308.094 171.094,303.186 171.094 C 279.697 171.094,251.388 195.700,242.808 223.573 L 241.046 229.297 240.812 302.148 L 240.579 375.000 184.352 375.000 L 128.125 375.000 128.125 243.750 L 128.125 112.500 217.969 112.500 L 307.813 112.500 307.813 141.323 M116.406 157.422 L 116.406 168.750 95.313 168.750 L 74.219 168.750 74.219 157.422 L 74.219 146.094 95.313 146.094 L 116.406 146.094 116.406 157.422 M116.406 191.797 L 116.406 203.125 95.313 203.125 L 74.219 203.125 74.219 191.797 L 74.219 180.469 95.313 180.469 L 116.406 180.469 116.406 191.797 M327.023 183.586 C 350.979 189.613,369.816 209.984,373.808 234.180 L 374.356 237.500 313.350 237.500 L 252.344 237.500 252.344 235.672 C 252.344 229.014,257.593 215.950,263.694 207.422 C 277.988 187.441,303.773 177.736,327.023 183.586 M116.406 226.172 L 116.406 237.500 95.313 237.500 L 74.219 237.500 74.219 226.172 L 74.219 214.844 95.313 214.844 L 116.406 214.844 116.406 226.172 M116.406 260.547 L 116.406 271.875 95.313 271.875 L 74.219 271.875 74.219 260.547 L 74.219 249.219 95.313 249.219 L 116.406 249.219 116.406 260.547 M375.000 311.719 L 375.000 374.219 313.281 374.219 L 251.563 374.219 251.563 311.719 L 251.563 249.219 313.281 249.219 L 375.000 249.219 375.000 311.719 M350.781 277.344 C 349.408 278.717,349.219 279.948,349.219 287.500 C 349.219 297.374,350.132 299.219,355.021 299.219 C 359.691 299.219,360.938 296.645,360.938 287.004 C 360.938 277.642,359.966 275.781,355.078 275.781 C 353.385 275.781,351.749 276.376,350.781 277.344 M97.754 283.594 L 116.406 283.594 116.406 294.922 L 116.406 306.250 95.313 306.250 L 74.219 306.250 74.219 294.434 L 74.219 282.617 76.660 283.105 C 78.003 283.374,87.495 283.594,97.754 283.594 M351.355 309.371 L 349.219 311.051 349.219 332.695 C 349.219 357.424,349.304 357.813,354.732 357.813 C 360.903 357.813,360.938 357.675,360.938 333.290 C 360.938 314.059,360.799 311.725,359.570 310.245 C 357.484 307.733,353.919 307.353,351.355 309.371 M116.406 328.906 L 116.406 340.625 95.313 340.625 L 74.219 340.625 74.219 328.906 L 74.219 317.188 95.313 317.188 L 116.406 317.188 116.406 328.906 M116.406 363.281 L 116.406 375.000 95.313 375.000 L 74.219 375.000 74.219 363.281 L 74.219 351.563 95.313 351.563 L 116.406 351.563 116.406 363.281 " /> </Grid>

如何从R ggplot图像获取SVG字符串？

在 R 中，假设我有一个 ggplot 对象，如下面教程中的 p 所示： 库（ggplot2） 数据<- data.frame( day = as.Date("2017-06-14") - 0:364, value = runif(365) + seq(-1...

需要了解为什么SVG不根据其内容调整大小

这是我的 SVG 的内容： 这是我的 SVG 的内容： <svg xmlns="http://www.w3.org/2000/svg" b-5x9jur1f24><g b-5x9jur1f24><circle cx="10" cy="15" r="3" b-5x9jur1f24></circle> <text x="20" y="18" b-5x9jur1f24>My</text></g> <line x1="10" y1="15" x2="10" y2="35" stroke="black" b-5x9jur1f24></line></svg> 为什么当我在浏览器中查看 SVG 时，它包含所有这些额外的空白？如何摆脱它？我不想调整viewbox，因为这会导致内容变大。 我期望 SVG 根据其内容调整大小。 要么给 SVG 元素一个 viewBox 属性： svg { border: solid red thin; } <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40"> <g> <circle cx="10" cy="15" r="3"></circle> <text x="20" y="18">My</text> </g> <line x1="10" y1="15" x2="10" y2="35" stroke="black"></line> </svg> 或者给 SVG 元素一个宽度和高度： svg { border: solid red thin; } <svg xmlns="http://www.w3.org/2000/svg" width="50" height="40"> <g> <circle cx="10" cy="15" r="3"></circle> <text x="20" y="18">My</text> </g> <line x1="10" y1="15" x2="10" y2="35" stroke="black"></line> </svg>

ggplot 注释刹车轴

我想在我的 ggplot 图表中插入文本。文本有一个下标和一个超级下标，例如 X[X} = 1,00*Y R^2 = 0,90。为此，我使用函数粘贴（表达式（））到注释（标签=（））中。 ...

将 SVG 路径转换为 CSS 剪辑路径多边形的算法

我正在尝试使用 SVG 作为剪辑路径。 我知道你可以将 url 传递给 SVG 路径，但我遇到了问题，特别是在考虑绝对路径与相对路径时（据我所知......

svg 图像内自定义区域中的链接不起作用

我想在 svg 图像内创建一些链接和悬停效果。因此，我在在线图像编辑器中的一个 svg 图像内创建了一些自定义透明区域，以便做到这一点。但当我尝试

如何在PDF文档中插入SVG文件？

我正在尝试使用 embeddSVG.py 在 PDF 中嵌入 SVG，但 Adobe Acrobat Reader 不会在我的 pdf 中显示 svg 内容。

Fontforge：使用 fontforge 命令行将字形导出到 SVG

如何使用 Fontforge 命令行将字形（从其 unicode）导出到 SVG？ 我还需要指定字体大小并保留字体中的原始边距。

提供一个没有实际 svg 元素的 SVG 过滤器

我有一个 svg 仅用于为 img 提供过滤器： ...

为什么带有 google 字体的 svg 徽标内的文本无法在网页上正确呈现？

我正在尝试使用 SVG 文件中的文本为我的网页设计一个简单的徽标，并为我使用谷歌字体的文本设计一个简单的徽标。 这是我的 SVG 文件： 我正在尝试使用 SVG 文件中的文本为我的网页设计一个简单的徽标，并为我使用谷歌字体的文本设计一个简单的徽标。 这是我的 SVG 文件： <svg xmlns="http://www.w3.org/2000/svg" width="240" height="56" viewBox="0 0 240 56"> <style> @import url("https://fonts.googleapis.com/css2?family=Titan+One"); </style> <text fill="#fac31e" font-size="3em" font-family="Titan One" x="1" y="45"> MyLogo </text> </svg> 当我保存文件并在 Mac 计算机上单击它时，图像将打开，并且我看到单词 MyLogo 使用字体 Titan One 正确呈现。 但是，当我使用以下方法将其添加到我的网站时： <img class="logo" style="font-family: Titan One" src="/img/my-logo.svg" alt="My Logo" width="140" height="120"> 它显示文本MyLogo，但它使用不同的字体呈现。我做错了什么？ 感谢您的帮助。 您可以使用 代替 。这是代码： <object data="/img/my-logo.svg" type="image/svg+xml" alt="My Logo" width="140" height="120">

IntersectionObserver - 变换属性针对整个 SVG 动画而不是类

我试图让 svg 动画在视口中启动。它可以工作，但是当添加变换属性时，整个 svg 而不仅仅是目标类都会受到影响。 导入 React, { useEff...

SVG：元素组的边框轮廓

我想为按 分组的多个元素添加边框。举个例子： 我想为按 <g> 分组的多个元素添加边框。举个例子： <g id="group"> <circle cx="125" cy="125" r="65" fill="orange" /> <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" /> </g> 最好的情况，边框应如下图所示。元素和边框之间的距离不是必需的（但最好有）。主要目标应该是组元素周围的单个边框（描边）。 我在教程中找到了这张图片，但它只是为了演示一组元素可能是什么样子。所以这没有帮助。 我已经尝试了不同的解决方案，但没有一个按预期工作，例如 使用 feColorMatrix 和 feMorphology 的 SVG 滤镜（请参阅这篇文章）。但在这种情况下，应用滤镜时元素的颜色会发生变化。 使用 <g> 和 stroke 设计 stroke-width 会在组周围产生矩形边框，这也不是我想要的。 有什么想法，如何在组周围设置边框，如图所示？ 很难获得您提供的图像中显示的虚线笔划。但一个坚实的轮廓应该是可能的。这是一个例子： <svg width="250" height="250" viewBox="0 0 250 250"> <defs> <filter id="groupborder" filterUnits="userSpaceOnUse" x="0" y="0" width="250" height="250"> <feMorphology operator="dilate" in="SourceAlpha" radius="8" result="e1" /> <feMorphology operator="dilate" in="SourceAlpha" radius="10" result="e2" /> <feComposite in="e1" in2="e2" operator="xor" result="outline"/> <feColorMatrix type="matrix" in="outline" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0" result="outline2"/> <feComposite in="outline2" in2="SourceGraphic" operator="over" result="output"/> </filter> </defs> <g id="group" filter="url(#groupborder)"> <circle cx="125" cy="125" r="65" fill="orange" /> <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" /> </g> </svg> 其工作原理如下： <feMorphology operator="dilate" in="SourceAlpha" radius="8" result="e1" /> 使用 dilate 操作来加宽图形元素。通过使用源 Alpha 作为输入图像，这会产生与图像中的图形元素相对应的黑色区域，而其他地方则为白色。 <feMorphology operator="dilate" in="SourceAlpha" radius="10" result="e2" /> 再次使用相同的滤镜，但膨胀量更大，导致图像稍胖 <feComposite in="e1" in2="e2" operator="xor" result="outline"/> 使用 XOR 运算将这些扩大的结果组合在一起，留下黑色轮廓。 <feColorMatrix type="matrix" in="outline" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .3 0" result="outline2"/> 此滤镜将轮廓的 Alpha 分量乘以 0.3，因此它显示为灰色而不是纯黑色。 <feComposite in="outline2" in2="SourceGraphic" operator="over" result="output"/> 最后，将此轮廓添加到原始图像中。 它不适用于像你这样的复杂形状，但你可以简单地在组周围添加一个带有属性Stroke-dasharray的矩形，如下所示 <rect stroke-dasharray="3 3" x="706" y="693" width="52" height="52" fill="none" stroke="#00a8ff" ></rect>