svg 相关问题

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

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

android kotlin android-studio svg assets

回答 1 投票 0

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 图标时基于浏览器的不同结果

在Safari（版本18.0.1）中运行此代码时，生成的图像为：然而，在Chrome（版本131.0.6778.139）中运行代码时，生成的图像是：我可以让这两个匹配...

svg openlayers

回答 1 投票 0

保持内部SVG的纵横比

我有一个根 SVG 元素，定义如下（插入到的顶部）：我有一个根 SVG 元素，定义如下（插入到 <body> 的顶部）： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-library"> <defs> <symbol id="image1" viewBox="-10 0 828 1000"> <path fill="currentColor" d="…" /> </symbol> </defs> </svg> 现在，我“实例化”库中的图像： <svg class="inline">  <use href="#image1"></use> </svg> 我希望它的高度为 1em 并保持纵横比（828 ÷ 1000，请参阅 viewBox）。我使用哪些 CSS 或属性？设置 height: 1em; width: auto; 使其高度为 1em，但宽度似乎是容器的 100%。设置aspect-ratio: auto;也没有帮助，我猜，viewBox定义的比率不是内在。您可以使用CSS属性aspect-ratio。 p { color: navy; } .inline { fill: currentColor; display: inline-block; height: 1em; aspect-ratio: 828/1000; } <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position: absolute;"> <defs> <symbol id="image1" viewBox="-10 0 828 1000"> <path fill="currentColor" d="M -10 50 L 818 0 L 690 1000 L 40 700 Z" /> </symbol> </defs> </svg> <p>Here is your inline <svg class="inline"><use href="#image1" /></svg> SVG.</p>

html css svg aspect-ratio

回答 1 投票 0

嵌入字体的 SVG 图像的正确 mime 类型

这是常见的 SVG mime 类型：图像/svg+xml 而且效果很好。然而，当嵌入 SVG 字体时，chrome 会告诉你 mime 类型不正确，显然是因为你返回的是字体而不是......

html svg font-face mime-types

回答 2 投票 0

类型“string”不可分配给类型“ImageSourcePropType”

背景我正在尝试使用 SVG 组件，该组件在图像标签内具有 xlinkHref 属性。该文件是一个普通的 SVG，但我使用 https://react-s... 将其转换为 React Native 组件 (TSX)...

typescript react-native svg

回答 3 投票 0

SVG 缩放文本以适合容器

这可能是一个非常简单的问题，但是如何让 SVG 中的文本拉伸以适合其容器？我不在乎它是否因拉得太长或太高而看起来很丑，但它需要适合它的