svg 相关问题

如何修复 WordPress 中的 svg 图片上传错误？

如何修复“抱歉，出于安全原因不允许使用此文件”WordPress 错误 定义（'ALLOW_UNFILTERED_UPLOADS'，true）；

CSS 网格中 div 内的 SVG 在底部添加了一些额外的填充，为什么？

我正在尝试使用 CSS 网格显示 SVG 网格。像这个例子一样简单，只是 div，还没有 SVG。这很好用。 #包装器{ 显示：网格； 网格间隙：2px； 网格-

librsvg rsvg_handle_get_dimensions 获取像素大小与浏览器中的渲染大小没有不同

librsvg 版本是 2.40.20 我想将 .svg 文件转换为 .png 文件，所以我编写了一些代码。 生成的函数非常简单。 int svg_file2png_file(char* svg_path, char* png_path) { G 错误*

如何将内联 svg（在 DOM 中）绘制到画布上？

嗯，我需要一些有关将 .svg 文件/图像转换为 .png 文件/图像的帮助... 我的页面上显示了 .svg 图像。它保存在我的服务器上（作为 .png 文件）。我需要将其转换为

使用 SVG 元素反应打字稿

我的组件不断收到错误，其中图标元素的图标映射，下面是我的代码的错误消息。我尝试 SVGProps |元素;通过搜索周围定义类型...

Flutter Web - 某些 svg 文件未出现在移动设备上

我有一个 Flutter Web 应用程序，在那里，如果我使用 google chrome 或 safari 等网络浏览器，即使我可以将其调整为像移动设备一样小，我也可以完整地看到 SVG 图像。 另一方面（Pr...

内联 SVG 在 Safari 和 Mobile Safari 中中断

我最近推出了一个使用了一些内联 SVG 的网站。 我最近推出了一个使用了一些内联 SVG 的网站。 <svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet"> <path d="[...]"/> </svg> Chrome 和 Firefox 中一切都很完美，但当我在 iPhone 或桌面版 Safari 中测试时，布局完全被破坏，许多 SVG 都丢失了。我通过 W3C 验证器运行了源代码，一切都找到了。我经常使用 SVG，所以这很令人困惑...... 事实证明，如果省略 height 和 width 属性，Safari 和 Mobile Safari 就会崩溃。我使用 CSS 设置尺寸，这在其他浏览器中运行良好。但我必须重新添加这些属性以使其行为一致： <svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55.221px" height="58.079px" viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet"> <path d="[...]"/> </svg> 注意上面缺少的 width 和 height 属性。 此外，有趣的是，preserveAspectRatio 的值很重要。我还有其他几个具有 preserveAspectRatio="none meet" 的内联 SVG 元素，它们不受此问题的影响。 另一个场景/修复方法是，如果您通过 CSS 缩放 SVG，以确保同时声明了 max-width 和 max-height。 .whatever svg { vertical-align: middle; max-height: 1rem; max-width: 1rem; } 我也遇到了这个问题，其中只有许多重复的 SVG 中的第一个会显示在列表显示中。这是因为 SVG 在元素中有一个带有 ID 的 ClipPath。 解决方案是为除第一个之外的每个 SVG 删除 中的 ，或者将其全部删除。

未处理的元素<metadata/>；图片重点：Svg loader Flutter

我想使用 Svg 作为我的 flutter 应用程序的自定义图标，我为此使用了 flutter_svg 包，但它给出了此错误： 未处理的元素；图片关键词：Svg loader 是的，我将 svg 上传到 asset 文件夹中...

我无法减小网站中波浪的大小

所以我正在建立一个网站，但我不知道如何降低 html 或 css 文件上的波浪高度。我从来没有和他们一起工作过，我似乎无法理解他们，因为每次我尝试...

SVG 遮罩不适用于应用变换

我正在尝试将蒙版应用于转换后的 svg 元素（它已简化，我正在尝试使用路径来实现，但结构是相同的）。如果将掩码应用于转换组之外的元素，则其工作原理如下

svg 自动缩放，在最终用户分辨率之间固定画布大小

我有一个 Power BI，我正在使用 HTML 内容视觉对象生成 .svg 图像。默认情况下，画布为 1280x720 以实现最大兼容性（我无法更改）。 .svg 是在 Ca 创建的...

与 SVG 文件中的其他 SVG 合并后，SVG 格式错误

我在一个 SVG 文件中有一些子 SVG（国家标志）。我想再添加一个，但显示不正确。文件“flags.svg”中缺少中心圆圈中的部分。 ...

SVG 响应式 Angular

我正在为客户开发一个 Web 应用程序，我们都因为 SVG 而感到沮丧。 基本上，我们正在为公司的每个流程创建流程图。他们要求我们关注一个区域...

在 svg 中使用“原生标签”相对于foreignObject 的优势

我创建了 stackoverflow-readme-profile 项目，该项目将个性化的 Stackoverflow 个人资料创建为 svg 图像。我花了很多时间使用“原生 svg 标签”（如

PBI - SVG 圆未显示

我正在尝试复制我在下面的链接中找到的视觉效果；但是，圆圈没有显示。我尝试过调整参数，但仍然没有找到使其发挥作用的解决方法。

如何将多个矩形合并为一个多边形

我在工作中正在努力完成这部分任务。我故意不详细说明工作任务的背景，以尽量将注意力集中在问题上。我必须将矩形合并成一个多边形...

带有 svg 路径的可点击圆形扇区

我正在为一个项目设计嵌套圆圈；我用最适合我的 svg 改编了这个答案，使间隙和边框很容易添加到路径中。我也尝试过在这个主题中使用倾斜和边框......

带有剪辑路径的自定义形状

div { 位置：固定； 底部：0； 背景颜色：绿色； 高度：50vh； 宽度：100vw； } 可以用clip-path和svg来做这种形状吗？ ...

如何显示 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); }

折线的连续 svg 动画

我有以下代码（在 TypeScript 中）创建一条折线（基于 4 个不同的点 x1y1、xCy1、xCy1、x2y2，其中 Xc 是平面上 x1 和 x2 之间的一半距离），所以它不是