可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
我正在为一个项目设计嵌套圆圈；我用最适合我的 svg 改编了这个答案，使间隙和边框很容易添加到路径中。我也尝试过在这个主题中使用倾斜和边框......
div { 位置：固定； 底部：0； 背景颜色：绿色； 高度：50vh； 宽度：100vw； } 可以用clip-path和svg来做这种形状吗？ ...
我有一个 SVG 文件，如下所示： 我有一个 SVG 文件，如下所示： <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol viewBox="0 0 13 13" id="icon-arrow-down"> <path d="M12.9 4.5l-6.1 6.1c-.2.2-.6.2-.8 0L.1 4.5c-.1-.1-.1-.2 0-.3l1.8-1.8c.1-.1.2-.1.3 0l4.4 4.4L11 2.4c.1-.1.2-.1.3 0l1.8 1.8c-.1.1-.1.2-.2.3z"/> </symbol> <symbol viewBox="0 0 13 13" id="icon-arrow-down-double"> <path d="M12 7.7l-5.1 5.1c-.2.2-.5.2-.7 0L1 7.7v-.2L2.6 6c.1-.1.2-.1.2 0l3.7 3.7L10.2 6c.1-.1.2-.1.2 0L12 7.5v.2z"/> <path d="M12 1.8L6.8 6.9c-.2.2-.5.2-.7 0L1 1.8v-.2L2.6 0h.2l3.7 3.7L10.2 0h.2L12 1.6v.2z"/> </symbol> 此文件中有数百个符号。 有没有一种简单的方法可以一次性查看 SVG 文件中的所有符号？ 现在我正在使用 HTML 来查看单个符号，如下所示： <svg><use xlink:href="icons.svg#icon-nextstep-compare"></use></svg> 但这太乏味了。 您可以在 Inkscape 中打开文件，然后选择菜单“对象”->“符号”（或按 Ctrl+Shift+Y），然后在下拉菜单中选择“当前文档”。 每个 svg 文件一个文件？乏味是对的！ 只是稍微不那么繁琐（但也许你可以使用脚本来生成它）： <svg> <use x="50" y="50" xlink:href="icons.svg#icon-nextstep-compare" /> <use x="100" y="50" xlink:href="icons.svg#icon-arrow-down" /> <use x="50" y="100" xlink:href="icons.svg#icon-arrow-down-double" /> <!-- etc, etc --> </svg> 更新 您甚至可以使用 xslt 样式表的魔力生成上述内容。 :-) <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <xsl:template match="/"> <svg> <xsl:for-each select="//svg:symbol"> <use> <xsl:attribute name="x"><xsl:value-of select="position() mod 10 * 20"/></xsl:attribute> <xsl:attribute name="y"><xsl:value-of select="floor(position() div 10) * 20"/></xsl:attribute> <xsl:attribute name="xlink:href">icons.svg#<xsl:value-of select="@id"/></xsl:attribute> </use> </xsl:for-each> </svg> </xsl:template> </xsl:stylesheet> 这不是那么优雅，但是快速且可用。制作一个 html 文件： <!DOCTYPE html><html><body> <!-- copy here the content of svg --> <svg id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16" id="alarm" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 5.5a.5.5 0 00-1 0v3.362l-1.429 2.38a.5.5 0 10.858.515l1.5-2.5A.5.5 0 008.5 9V5.5z"/><path d="M6.5 0a.5.5 0 000 1H7v1.07a7.001 7.001 0 00-3.273 12.474l-.602.602a.5.5 0 00.707.708l.746-.746A6.97 6.97 0 008 16a6.97 6.97 0 003.422-.892l.746.746a.5.5 0 00.707-.708l-.601-.602A7.001 7.001 0 009 2.07V1h.5a.5.5 0 000-1h-3zm1.038 3.018a6.093 6.093 0 01.924 0 6 6 0 11-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 014.387 1.86 2.5 2.5 0 000 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 013.527 3.527A2.5 2.5 0 0013.5 1z"/></symbol><symbol fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16" id="alarm-fill" xmlns="http://www.w3.org/2000/svg"><path d="M6 .5a.5.5 0 01.5-.5h3a.5.5 0 010 1H9v1.07a7.001 7.001 0 013.274 12.474l.601.602a.5.5 0 01-.707.708l-.746-.746A6.97 6.97 0 018 16a6.97 6.97 0 01-3.422-.892l-.746.746a.5.5 0 01-.707-.708l.602-.602A7.001 7.001 0 017 2.07V1h-.5A.5.5 0 016 .5zm2.5 5a.5.5 0 00-1 0v3.362l-1.429 2.38a.5.5 0 10.858.515l1.5-2.5A.5.5 0 008.5 9V5.5zM.86 5.387A2.5 2.5 0 114.387 1.86 8.035 8.035 0 00.86 5.387zM11.613 1.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z"/></symbol><symbol fill="currentColor" class="bi bi-align-bottom" viewBox="0 0 16 16" id="align-bottom" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="12" x="6" y="1" rx="1"/><path d="M1.5 14a.5.5 0 000 1v-1zm13 1a.5.5 0 000-1v1zm-13 0h13v-1h-13v1z"/></symbol><symbol fill="currentColor" class="bi bi-align-center" viewBox="0 0 16 16" id="align-center" xmlns="http://www.w3.org/2000/svg"><path d="M8 1a.5.5 0 01.5.5V6h-1V1.5A.5.5 0 018 1zm0 14a.5.5 0 01-.5-.5V10h1v4.5a.5.5 0 01-.5.5zM2 7a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V7z"/></symbol><symbol fill="currentColor" class="bi bi-align-end" viewBox="0 0 16 16" id="align-end" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.5 1a.5.5 0 00-.5.5v13a.5.5 0 001 0v-13a.5.5 0 00-.5-.5z"/><path d="M13 7a1 1 0 00-1-1H2a1 1 0 00-1 1v2a1 1 0 001 1h10a1 1 0 001-1V7z"/></symbol><symbol fill="currentColor" class="bi bi-align-middle" viewBox="0 0 16 16" id="align-middle" xmlns="http://www.w3.org/2000/svg"><path d="M6 13a1 1 0 001 1h2a1 1 0 001-1V3a1 1 0 00-1-1H7a1 1 0 00-1 1v10zM1 8a.5.5 0 00.5.5H6v-1H1.5A.5.5 0 001 8zm14 0a.5.5 0 01-.5.5H10v-1h4.5a.5.5 0 01.5.5z"/></symbol></svg> <!-- copy here the content of svg --> <br /> <script type="text/javascript"> const icons=document.getElementById("icons").getElementsByTagName('symbol'); for(const icon of icons){ document.write( '<svg>'+ '<use xlink:href="bootstrap-icons.svg#'+icon.id+'" color="red" />' + '<text x="0" y="13">'+icon.id+'<text>' + '</svg>'); } </script> </body> </html> 将svg的内容复制到标记的地方（仅svg），并给它id =“icons”。 将 svg 文件放在 html 旁边，在本例中，有一部分 bootstrap-icons.svg 图标颜色为红色，因为文字是黑色，只是红色上显示黑色，可能会导致彩色图标出现问题。 在浏览器中打开 html。 角度 TS： fetch('/assets/svg/sprites.svg') .then(r => r.text()) .then(text => { const container = document.getElementById('svg-sprite'); container.innerHTML = text; const icons = document.querySelectorAll('#svg-sprite svg symbol'); icons.forEach(el => this.svgIds.push(el.id)); container.remove(); }) .catch(e => console.error(e)); HTML： <h2>SVG Sprite Icons</h2> <div id="svg-sprite"></div> <div *ngIf="svgIds.length > 0" class="sprites-grid"> @for (icon of svgIds; track icon) { <div class="flex flex-column align-items-center justify-content-center"> <i [inlineSVG]="'sprites.svg#' + icon" class="w-2rem h-2rem"></i> <span class="text-center">{{ icon }}</span> </div> } </div> SCSS： .sprites-grid { display: grid; gap: 8px; width: 100%; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); grid-template-rows: repeat(auto-fill, 6rem); }
我有以下代码（在 TypeScript 中）创建一条折线（基于 4 个不同的点 x1y1、xCy1、xCy1、x2y2，其中 Xc 是平面上 x1 和 x2 之间的一半距离），所以它不是
我想实现拖动点应该始终保持在路径上应该更新命令Q或C或S来更新通过点的曲线，这个可拖动点不应该是控制点...
我应该使用哪种图像格式来进行 ios 开发？ SVG 还是 PNG？
过去 1 个多月以来，我一直致力于 iOS 开发，我所经历的是，我必须为 iphone 放置 1x 2x 3x 的图像，然后为 ipad 放置 2x retina 的图像。一位经验丰富的设计师建议...
我正在研究如何创建一个具有动态/移动背景的div，该背景基于具有三种颜色的径向渐变： 我们的想法是有一个像这样的中心点： 拖动
我花了一整天的时间来处理这个 flutter_svg，但我没有找到问题所在，SVG 仅在调试模式下工作，但在发布模式下不显示。 这里似乎有什么问题？
我正在制作一个 vue.js 应用程序，它使用大量不同的图标，因此我决定在 node.js 中制作一个小图标生成器来标准化它们的使用，并且它还会“裁剪”每个 svg 以使其符合其标准...
对象构造函数内的Javascript setInterval 无法按预期工作
我正在学习 Javascript 对象，我的代码有一个非常奇怪的问题。下面的代码使用 setInterval() 使时钟的时、分、秒臂根据系统时间移动。我添加了一个st...
我有一个 SVG，我试图将其用作包含多个笔划的蒙版图像，但是当用作蒙版图像时，不会显示笔划。 主要的 { 位置：相对； 弹性：1； 爸...
我正在尝试编写一个PHP函数来转换SVG图像而不进行任何抗锯齿（以便最终的PNG是块状的并且仅包含SVG中指定的颜色）。 相当于命令行...
我正在开始我的第一个 React/Next.js 项目，我需要导入一个 SVG 文件并在渲染之前对其进行修改。 我试图找到一些可以让我做到这一点的模块，然后我选择了react-svg https://gi...
如果我有这个 HTML 如果我有这个 HTML <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <g id="repeat"> <path fill="currentColor" d="M20.3 13.43a1 1 0 0 0-1.25.65A7.14 7.14 0 0 1 12.18 19A7.1 7.1 0 0 1 5 12a7.1 7.1 0 0 1 7.18-7a7.26 7.26 0 0 1 4.65 1.67l-2.17-.36a1 1 0 0 0-1.15.83a1 1 0 0 0 .83 1.15l4.24.7h.17a1 1 0 0 0 .34-.06a.33.33 0 0 0 .1-.06a.78.78 0 0 0 .2-.11l.09-.11c0-.05.09-.09.13-.15s0-.1.05-.14a1.34 1.34 0 0 0 .07-.18l.75-4a1 1 0 0 0-2-.38l-.27 1.45A9.21 9.21 0 0 0 12.18 3A9.1 9.1 0 0 0 3 12a9.1 9.1 0 0 0 9.18 9A9.12 9.12 0 0 0 21 14.68a1 1 0 0 0-.7-1.25Z" /> </g> </svg> <svg id="btnRepeat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="button"> <use href="#repeat"></use> </svg> 还有这个CSS :root { --norm-colour: green; --high-colour: red; } #btnRepeat { position: absolute; width: 15%; color: var(--norm-colour); } #btnRepeat:hover { color: var(--high-colour); cursor: pointer; } svg 颜色是正确的，并且悬停时会按预期变化。 如果我将选择器从 #btnRepeat:hover 更改为 svg[id^="btn"]:hover 的“通用”形式，则悬停时的颜色不会发生变化（尽管光标发生变化。）为什么通用形式失败了吗？ 因为id选择器具有更高的优先级。 :root { --norm-colour: green; --high-colour: red; } [id^="btn"] { position: absolute; width: 15%; color: var(--norm-colour); } [id^="btn"]:hover { color: var(--high-colour); cursor: pointer; } <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <g id="repeat"> <path fill="currentColor" d="M20.3 13.43a1 1 0 0 0-1.25.65A7.14 7.14 0 0 1 12.18 19A7.1 7.1 0 0 1 5 12a7.1 7.1 0 0 1 7.18-7a7.26 7.26 0 0 1 4.65 1.67l-2.17-.36a1 1 0 0 0-1.15.83a1 1 0 0 0 .83 1.15l4.24.7h.17a1 1 0 0 0 .34-.06a.33.33 0 0 0 .1-.06a.78.78 0 0 0 .2-.11l.09-.11c0-.05.09-.09.13-.15s0-.1.05-.14a1.34 1.34 0 0 0 .07-.18l.75-4a1 1 0 0 0-2-.38l-.27 1.45A9.21 9.21 0 0 0 12.18 3A9.1 9.1 0 0 0 3 12a9.1 9.1 0 0 0 9.18 9A9.12 9.12 0 0 0 21 14.68a1 1 0 0 0-.7-1.25Z" /> </g> </svg> <svg id="btnRepeat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="button"> <use href="#repeat"></use> </svg>
我第一次想做网站，但是太难了 https://mapsvg.com/maps/world 这里我下载了一张世界地图，我设置了宽度：100%高度：auto，但是为什么地图被裁剪了？我想要...
Python 中的服务器端 SVG 到 PNG（或其他图像格式）
目前我正在使用 rsvg 加载 svg（从字符串，而不是从文件）并绘制到开罗。有人知道更好的方法吗？我在应用程序的其他地方使用 PIL，但我不知道有什么方法可以做到这一点...
我有一个使用文件输入字段的html通过使用标签标记，外观被自己的文本覆盖。现在我想使用 svg...
我正在尝试创建一个 SVG 徽标。我从 Illustrator 导出了该文件。徽标上有阴影。我正在查看 XML，找到了过滤器节点 我正在尝试创建一个 SVG 徽标。我从 Illustrator 导出了该文件。徽标上有阴影。我查看了 XML，发现了过滤器节点 <filter filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2"> <feGaussianBlur stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur> <feOffset result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset> <feMerge> <feMergeNode in="offsetBlurredAlpha"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> 有没有办法改变生成的offsetBlurredAlpha的alpha？我不希望它从纯黑色开始，我希望它从 50% 黑色开始，以便对象周围的阴影效果足够亮。 一种方法是添加一个 feComponentTransfer 过滤器基元，如下所示： <filter id="dropshadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <feOffset dx="2" dy="2"/> <feComponentTransfer> <feFuncA type="linear" slope="0.2"/> </feComponentTransfer> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> 可以在这里看到一个实例。 一种方法是简单地使用opacity: 0.5。为此，不要创建将投影与顶部的原始源合并的过滤器，而是为only投影创建一个过滤器，并将其应用到引用源形状的<use>标签。 这种方法还有其他优点。例如，现在您可以仅对阴影应用单独的样式。 #arrow-shadow { opacity:0.5; } g:hover #arrow-shadow { opacity:0.7; } <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200" width="400px"> <defs> <filter id="dropshadow" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> <feOffset dx="2" dy="2" result="offsetblur" /> </filter> </defs> <g fill="#EEE"> <use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use> <polygon id="polygon" points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056"/> </g> </svg> 设置 alpha 值的另一种方法是使用 feColorMatrix 过滤器基元。使用它您可以同时设置 alpha 值和阴影的颜色。 下面的滤镜将 alpha 值乘以 0.2，同时将阴影的颜色设置为红色。 <filter id="dropshadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <feOffset dx="2" dy="2"/> <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> 但是如果您只需要更改 alpha 值，feComponentTransfer 过滤器基元可能是更好的选择。 我的情况是，我将 svg 中的每个路径或项目设置为遮罩过滤器，之后我将设置不透明度路径：0 并使用过渡不透明度：1
``` ```<svg><g id="SA1A" > <rect id="berthbg-1" data-name="berthbg-1" className="cls-24" x="615.48" y="369.06" width="22.77" height="18" transform="translate(1253.74 756.13) rotate(-180)" /> <text id="indicator-1" data-name="indicator-1" className="cls-48" transform="translate(616.11 384.25) scale(.83 1)"> Hello, How to scroll me in this text inside g tag of svg element? </text></g></svg>``` 下面是盒子的大小（svg 图像）。 我尝试使用溢出和选取框标签，但不起作用，我希望此文本在附加图像框内滚动而不与外部重叠。 一个可能的解决方案是使用如下例所示的符号。 该符号有一个限制视图的viewBox（您只能看到矩形id =“berthbg-1”） 对于动画，我使用 SMIL 并对文本的 x 属性进行动画处理。您可能想选择不同的解决方案。 由于符号中包含了所有内容，因此您需要将符号与 <use> 元素一起使用。 <svg viewBox="615 368 140 20"> <symbol viewBox="615.48 369.06 22.77 18" id="SA1A" > <rect id="berthbg-1" x="615.48" y="369.06" width="22.77" height="18" transform="translate(1253.74 756.13) rotate(-180)" fill="silver" /> <text id="indicator" transform="translate(616.11 384.25) scale(.83 1)" x="409" text-anchor="end"> Hello, How to scroll me in this text inside g tag of svg element? <animate attributeName="x" attributeType="XML" from="409" to="0" dur="20s" repeatCount="indefinite"/> </text> </symbol> <use href="#SA1A" x="615.48" y="369.06" width="22.77" height="18"/> </svg>
Webpack：阻止 css-loader 用散列 svgs 替换 svg url
我意识到我的项目在某个时候停止显示我从 scss 文件链接的 svgs。 我有这样的行： 背景图像：url('./assets/icons/check-icon.svg'); Webpack，我怀疑它是...