问题标签 [inline-svg]

与 Chrome、Edge 和 Opera 相比，我发现 Firefox 存在不一致之处。transform-origin使用 CSS 类时，每个浏览器都可以正常处理。但是，当我将transform-originSVG 元素作为属性放置时，FF 会忽略该效果。演示代码如下。我的主要问题是如何解决这个问题，但我也很想知道这是否是预期的行为。

CSStransform-origin在 FF 中工作。

内联 SVG 似乎无法识别transform-origin（在 Chrome/edge 中始终有效）

编辑：另一位用户指出这个问题类似于How to set transform origin in SVG，但他们的前提是超级广泛（如何）并且错误或过时（发布于 8.5 年前）。

“我尝试使用 transform-origin 属性，但它不会影响任何东西。”

也许浏览器支持有所改进，但我的问题特别表明transform-origin在所有现代浏览器中作为 CSS 规则或作为除 FireFox 之外的所有现代浏览器中的表示属性非常完美。这种差异很可能导致一个解决方案是该线程独有的，而第二个解决方案是对其他线程答案的新看法。

更不用说他们的问题以 JavaScript 实现为中心，并且是在 FireFox 无法识别诸如“中心”或无单位数字之类的关键字时发布的，这有损于核心 SVG 标记问题，即 FireFox 解释与transform-origin=''其他浏览器不同的表示属性.

我使用一些内联 svg 作为剪辑路径和 AOS 库制作了这个动画部分。这个想法是用不同的动画为图像的每个切片设置动画。此标记有效并且支持 IE10+。但我真的不明白如何让这个部分响应，我的意思是，如果屏幕的宽度低于 svg 的固定宽度，我怎样才能使整个部分适应屏幕的 100%（或更好的 90%）。请至少帮助我一个起点。非常感谢

这是一个工作的代码笔（滚动动画在代码笔框中效果不佳，因此您必须上下调整框的大小以测试动画）

编解码器

我正在开发一个 Angular 应用程序，并试图找出处理 SVG 的最佳方法：

1. 将它们用作背景图像、img 标记的 src 属性等 - 我失去了使用 CSS 设置 SVG 样式的能力。另一方面，它很容易使用，我不必复制/粘贴内容

2. 使用向我们发出请求的第 3 方应用程序并将 SVG 放入具有指令的容器中 - 例如https://www.npmjs.com/package/ng-inline-svg - 它发出我想要的 HTTP 请求喜欢避免。但是，我可以使用 CSS 设置图像样式

3. 将 SVG 直接放在组件模板中 - 没有额外的请求，我可以完全控制样式。但这会降低代码的可重用性。

我想完全避免 HTTP 请求的原因是因为我们有多个主题（相同的 SVG 但不同的颜色），并且我希望每个“图像”最多加载一个资源。

有什么好的做法我可以使用吗？我可以查看任何开源代码吗？

第三个选项甚至有什么好处吗？也许我可以编写一个 Angular 服务并以某种方式对内联 SVG 进行分组，但我现在不知道。

亲切的问候，马辛

我有一个带有透明fill和深色的内联 svg stroke。当它悬停时，我想fill用深色。
问题是，当我增加stroke-width使笔触更明显时，笔触会超出元素的宽度框，如下面的屏幕截图所示。
那么如何给 svg 元素一个额外的空间让笔画增长呢？

当使用内联 SVG 作为可点击元素时，点击两次可能会选择附近的文本。

如果不强制用户选择所有附近的元素，如何防止这种情况发生？

好的，所以我主要使用 Laravel 和 Vue js 构建一个 Web 应用程序。我尝试使用https://github.com/JetBrains/svg-sprite-loader#installation但导出的 svg 显示为空白。

在继续之前的那种情况下，我开始怀疑这是否真的值得，我不确定。

所以我的问题是，真正的区别是什么？

假设我们不能使用图标字体，因为我们想要多色的 svg。

• 是否值得尝试使用一个包将 svgs 合并到一个 sprite 中然后使用它，或者它与 http/2 并没有真正的区别？

• 考虑到文件大小和数据使用情况，是否值得尝试使用 sprite 而不是多个外部 svg 文件来最小化这方面？

• 内联 svgs 也是一种选择，但这会大大增加 dom 的大小。

所以我想知道......有没有人尝试过所有这些技术并找出最好和最高效的技术以及它们的真正区别是什么。

最后，如果有人能给我一些关于为什么我的 svg sprite 显示为空白的输入，那将是一个巨大的奖励：P

我已经在我的 webpack.mix 中配置了上面的包，如下所示：

我正在使用ng-inline-svg（最新版本，即 10.0.0），我正在尝试使用 Ivy 将库迁移到 angular 9。由于更新了角度版本，我收到以下错误：

我已经导入了内联 svg 模块，如下所示app.module.ts：

有人可以帮忙吗？

编辑：请注意，在aot中构建时会发生这种情况

我在填充 InlineSVG 时遇到了一些问题。我有一个divsvg：

然后在 CSS 中：

但图标仍然是灰色的。

我也试过：

在不同的组合中，但没有任何效果。
这是我的 stackblitz 的链接。怎么了？

为什么我的内联 svg 无法在 Safari（桌面和移动设备）上正确显示？

我正在尝试在几个 WordPress 网站上使用内联 svg 图形。内联 svg 的原因之一是能够设置图形样式，而无需手动执行，然后将图形作为文件上传。

由于我是 svg 的新手，我确信代码中会有一些错误，但总体而言，它似乎适用于不同的浏览器/分辨率等。只有在 Safari 上，svg 无法正确显示。它不是水平居中显示，而是显示为偏移到图形的一部分的右侧切割。实际上，它看起来好像第一个符号居中，尽管这可能是巧合。

如果我稍微玩一下视图框，我可以让它像它应该的那样居中 - 但是 svg 不能在其他浏览器上正确显示。

知道我哪里出错了吗？这是我的代码中的错误还是 Safari 的已知错误？

任何帮助表示赞赏！

我有一张 [inlineSVG]的图片。当我导航到该页面时，它会出现几秒钟然后消失。

我的组件的.html文件：

图像的CSS是：

我找不到任何线索为什么会这样。如果你知道那么请与我分享。非常感谢