svg 相关问题

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。

我可以制作一个具有多种效果的 SVG 滤镜吗？

我正在尝试创建一个滤镜，既可以将亮度降低到 30%，又可以将图像灰度到 90%。在 webkit 上，这非常简单，但 Gecko 目前仅支持通过

html css svg gecko svg-filters

回答 1 投票 0

使用JS获取SVG中元素的绝对坐标

论坛用户好时光。我提前为我的英语道歉。我找不到答案（我决定去问英语观众）。嵌套在

javascript svg ecmascript-6

回答 4 投票 0

带圆角的圆环图 - 有可能吗？ [已关闭]

我需要将其实现为圆环图 - 我四处寻找 css/svg/canvas 解决方案，但找不到任何可靠的方法。我知道我可以将每个部分的角完全圆化，...

javascript css svg charts html5-canvas

回答 2 投票 0

pixijs 中的模糊 SVG

我正在尝试使用 PIXIJs 库来显示 SVG 图像，但在智能手机上 SVG 看起来很模糊。这是示例代码 var $ = window.jQuery; var PIXI = window.PIXI; $(文档).准备好(

javascript android canvas svg pixi.js

回答 2 投票 0

将描边渐变定义从 SVG 移至 CSS

有一个渐变，定义如下：有一个渐变，定义如下： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs>  <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> 它在 CSS 类中被引用，应用于另一个 <path> 中的 <svg>: .circle-graph-blue-greenish { stroke: url(#circle-graph-blue-greenish-gradient); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } svg { height: 50vh; } <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs>  <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> <svg class="rotate-90" width="75%" viewBox="0 0 100 100"> <path class="circle-graph-underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"></path> <path d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50" class="circle-graph circle-graph-blue-greenish" style="stroke-dashoffset: 251.677;stroke-dasharray: 282.783;"></path> </svg> 效果很好。我想将渐变定义移至 CSS 类中： .circle-graph-blue-greenish { stroke: linear-gradient(0deg, rgba(0,213,189,1) 0%, rgba(36,193,237,1) 100%); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } 但不幸的是它已经停止工作（没有可见的中风）。为什么这两个定义不相同？如何在 CSS 中定义 stroke 的渐变？ UPD 看来我可以移动颜色值： <stop offset="0" stop-color="var(--circle-graph-blue-greenish-gradient-color-1)" /> 总比没有好。想要在 CSS 中完成所有事情。 .pie { --my-color-1: #00d5bd; width: 200px; aspect-ratio: 1; border-radius: 50%; background-image: radial-gradient(circle, black 60%, transparent 60%), conic-gradient(transparent 75%, var(--my-color-1) 75%, var(--my-color-1) 84%, orange 84%, orange 92%, red 92%), radial-gradient(circle, black 65%, transparent 65%); } <div class="pie"></div>

html css svg linear-gradients stroke

回答 1 投票 0

React Native SVG 堆叠圆圈不显示内半部分

较暗的半透明环应该与较亮的半透明环具有相同的厚度，但由于某种原因不是。当我从“前景”圆圈中去掉不透明度时，问题就开始了。我不知道为什么，并且

react-native svg

回答 1 投票 0

如何在画布中已有的内容上绘制 SVG？

我想要做的是将 SVG 绘制在画布上的蓝色圆圈上。蓝色圆圈应该是背景。然而，结果只是 SVG。最终结果应该类似于 (

svg canvg offscreen-canvas

回答 1 投票 0

如何更改 svg 的颜色？

我在 Web Worker 内部使用 canvg 将 SVG 绘制到 OffscreenCanvas 中。我将用黑色绘制 SVG。是否可以在不修改 SVG 本身或使用 CS 的情况下将颜色应用于 SVG...

svg web-worker canvg offscreen-canvas

回答 1 投票 0

当 div 大小提前未知时，使用 CSS 网格布局将 div 与 svg 重叠

我有一个div：它有宽度，但提前不知道它可能有也可能没有设置高度当未设置高度时，它应该垂直扩展以匹配内容。我想覆盖那个迪...

html css svg overlay

回答 1 投票 0

有没有办法在 Windows 窗体中渲染 SVG？

我正在使用一个库，该库将其部分状态呈现为 SVG 文档。我想在 Windows 窗体或 WPF 环境中呈现它。目前有办法做到这一点吗？如果...

winforms svg rendering

回答 3 投票 0

如何在 Odoo 中上传 SVG？

我正在尝试将 SVG 上传到 Odoo，但 Odoo 正在修改该文件。具体来说，它看起来像是删除了文件的 JavaScript 部分。图像的行为应如下所示： https://沙恩。

svg odoo

回答 1 投票 0

有没有办法在flutter中使用.svg作为应用程序图标？

我使用 flutter_launcher_icons 包在 flutter 应用程序中设置默认应用程序图标（特别适用于 Android）。现在，我必须使用 svg 文件作为图标，因为 png 图标在深色主题中无法正确显示

android flutter svg flutter-dependencies

回答 2 投票 0

更新Android studio中导入矢量资源时存储svg文件的默认位置

以前，在android studio中导入矢量资源时，svg文件默认存储在drawable文件夹中，但现在每次我都必须在android studio中的弹出窗口中手动选择位置，

android kotlin android-studio svg assets

回答 1 投票 0

我想在我的 svg 上添加一个签名动画，我已经尝试过了，但只显示了一半？

html css svg css-animations svg-animate

回答 1 投票 0

如何在 iText Java 中直接将 AI (Adobe Illustrator) / SVG / PDF 文件嵌入 PDF 以避免渲染故障？

SVG 文件在 iText Java 中无法正确呈现。我应该找到一种更好的方法将矢量图插入到我的 pdf 文件中。我想用一些矢量图和文本编程生成 PDF 文件...

java pdf svg itext7 adobe-illustrator

回答 1 投票 0

Android 上的 Chrome 更喜欢苹果触摸图标而不是 SVG favicon

我正在本地非 HTTPS vitejs 开发服务器的网页中测试 favicon。这是与 favicon 相关的部分：我正在本地非 HTTPS vitejs 开发服务器的网页中测试 favicon。这是与favicon相关的部分： <link rel="icon" href="/favicon-32x32-light.png" sizes="32x32" media="(prefers-color-scheme: light)" /> <link rel="icon" href="/favicon-32x32-dark.png" sizes="32x32" media="(prefers-color-scheme: dark)" /> <link rel="apple-touch-icon" href="/apple-icon-180x180-light.png" sizes="180x180" media="(prefers-color-scheme: light)" /> <link rel="apple-touch-icon" href="/apple-icon-180x180-dark.png" sizes="180x180" media="(prefers-color-scheme: dark)" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" /> SVG 有一个像 viewBox="0 0 160 160" 这样的 viewBox，不确定这是否会影响浏览器选择算法。它包含一个 <style> 标签来支持两种配色方案： .inside { fill: green; } @media (prefers-color-scheme: dark) { .inside { fill: red; } } 在 Windows Chrome（以及 Firefox、Edge）中，仅请求并应用 SVG 图标：在 Android Chrome (v129.0.xxx) 中，同时请求 SVG favicon 和 apple touch 图标，然后应用 apple touch 图标（SVG 具有不同的颜色，以便被发现）：我的理解是Android Chrome支持SVG作为favicon，它的选择算法应该选择SVG。所以我想我的页面设置一定有问题。这是MDN：如果有多个，浏览器将使用它们的媒体、类型和大小属性来选择最合适的图标。如果多个图标同样合适，则使用最后一个。如果后来发现最合适的图标不合适，例如因为它使用了不受支持的格式，则浏览器将继续使用下一个最合适的图标，依此类推。 realfavicongenerator.net 上的 post 解释说，Android Chrome 也依赖于苹果触摸图标，基于宽度/高度计算。但 SVG 可以根据需要缩放，所以我的理解是它应该优先。我尝试过的事情，但没有运气：更改<link>标签的顺序删除 Apple Touch 图标或 SVG 或两者中的 sizes 属性使用不同的 <link> 属性复制 SVG media，以实现暗/亮方案使用大于 180x180 的 viewBox 创作放大的 SVG，例如200x200 通过 HTTPS 公开本地站点让它选择 SVG 的唯一方法是删除两个苹果触摸图标 <link> 标签。此时，在 32x32 PNG 和 SVG 之间，Android Chrome 选择了 SVG。这是一个显示问题的代码和框，设置也更简单（没有深色/浅色变体）：https://s3cnww.csb.app/ 有谁知道如何让 Android Chrome 选择 SVG？ TA 当浏览器需要在多个 Favicon 中进行选择时，您无法选择首选 Favicon。每个浏览器都有自己的实现，正如Robert Longso所建议的，您唯一的解决方案是直接联系每个浏览器以检查它是否是预期的行为。例如，以下是使用 apple-touch-icon 的 Safari 浏览器的规则： https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/ uid/TP40002051-CH3-SW4.

android html google-chrome svg favicon

回答 1 投票 0

有些 SVG 在 Nextjs 中工作，有些则不能，为什么？

当我尝试在 Nextjs 应用程序中使用 svgs 时，我一直在努力使用它们。它们不会显示为背景图像或图像本身。我尝试过其他地方的 svgs 并且它们可以工作，但我找不到...

svg next.js

回答 2 投票 0

与 <mat-icon>（角度材质）一起使用时我们可以更改 svgicon 颜色吗

所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。这是供参考的代码：所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。以下是参考代码： <mat-icon svgIcon="menu"></mat-icon> 但是当我尝试时，图标出现了， <mat-icon class="color" svgIcon="menu"></mat-icon> 以及CSS部分 .color:hover, .color:active{ color: black; fill: black; } 这不起作用。任何帮助将不胜感激，谢谢。今天早上我自己解决了这个问题，我所做的基本上是用文本编辑器打开 svg 文件，并且在长“Path”属性的末尾有一个填充属性，我只是删除了该部分，现在它工作得很棒。示例（之前）：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866" fill="#ffffff";/>` 之后：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866"/> 现在一切正常，悬停也正常...非常感谢您仍在研究它。 SVG 图标默认为黑色，除非另有说明，您发布的代码似乎有效，尝试将鼠标悬停时的颜色属性更改为 red 并查看是否可以看到更改。将 SVG 的填充变量写入 currentColor，如下所示： <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> </svg> 之后你可以像这样改变颜色：<mat-icon svgIcon="hero" style="color: red;" />

angular svg angular-material angular5

回答 3 投票 0

“C”在 SVG 路径中意味着什么？

路径填充=“无”笔划=“#000000”d=“M151.5,85.5c0-36.48,29.52-66,66-66” 谁能详细解释一下 d="" 吗？我能够理解 M 标签，但我无法理解 C 标签是什么？和详细信息：c0-3...

svg

回答 3 投票 0

有没有一种方法既可以通过 URL 加载 SVG 图像，又可以用 CSS 颜色变量填充它？

我正在构建一个编辑器，用户可以在其中从我们的 CDN 选择 SVG，并选择其填充颜色。在前端，我希望能够以用户选择的颜色渲染这些 SVG，但这

css svg sass

回答 2 投票 0

svg 相关问题

最新问题