问题标签 [inline-svg]

我正在使用 ember-inline-svg，有一个 logo.svg 文件，我用它来调用它

{{inline-svg 'logo' class="logo" }}

在我的 hbs 文件中。

它工作正常。我只需要再向它发送一个数据参数并在 svg 文件中访问它，这样我就可以动态生成 svgs。我该怎么做呢？

我将 3/4 SVG 导入 next.js 页面，但显示不起作用。好像ID有冲突...

我试图从草图更改掩码 ID 和不同导出，它在 svgomg 查看器中有效，但在页面中无效。我还尝试了一些来自社区的组件但没有成功，并编辑了我的 babelrc/webpack 配置。

我的背景 ：

我的山：

我的组件导入：

一个矩形不应该出现，山应该是完整的，显示良好。我的 React 应用程序的许多 SVG 中都有这个问题。我不知道如何以最佳方式封装我的 SVG，我需要保留纵横比属性。

我通过在inkscape中保存为“优化的SVG”来创建这个简单的内联SVG。在保存之前，我将大小设置为 200X200px。

然后我把它放在div一个宽度为200px.

这是代码笔：

https://codepen.io/oleersoy/pen/dLxvEJ

可以看出，红色 div 比内联 svg 渲染大很多。我们如何设置 viewbox 参数以使内联 SVG 始终适合包含元素的大小？

我在另一个 SVG 中有一个 SVG，但是内部的 SVG 正在剪裁。

如果我检查元素，检查器会显示正确大小的矩形：

我一直在尝试更改内部 SVG 上的 viewBox，但没有任何乐趣。有没有正确显示它的技术？

我在 JavaScript 的谷歌地图 API 中将自定义标记显示为 .svg。

谷歌地图 api 似乎不喜欢#00492C在代码中使用。fill="#0000"不起作用，只会fill="green"起作用。

我期待我的标记变成深绿色，但它不再出现了。

我的页面上有几个 SVG，可能最多 10-15 个。它们并不是特别复杂，一个路径示例可能如下：

它基本上是一个讲话泡泡，它会从某人的嘴里发出，所以实际上只有几条弧线，也许是一些线条，而有些我见过它什么都没有。

但是在我的页面上，当鼠标移动时，路径会更新（它们会发生显着变化，但形状仍然相同，因此路径不会更大）。当这种情况发生在 Ipad 等移动设备上并且页面上有 3 个以上的设备时，我可以注意到显着的性能下降。

我认为这取决于我获得新路径的计算，但是我使用了 chrome 工具（性能选项卡），似乎我设置该属性的贡献相当大。所以我的问题...

当鼠标移动它做一个

element.attr("d", newPath);

如前所述，这可能发生在 15 个单独的 svg 上。

有没有更有效的方法来设置路径？有没有一种方法可以设置每个路径，但只调用一次重绘/更新？

非常感谢

我在我的 CSS Grid 上找到了一个位置，我在其中插入了一个大约 15 个字符长的段落，我想为其添加一个背景元素，并且我希望它具有一些个性，因此我使用了内联 SVG 内容。

我试图bottom用 a将它放置在，position:relative但是当您更改视口大小时，它不能很好地缩放。我将 SVG 代码包装在一个容器中：

以及 SVG 的样式：

这是 HTML 标记

我的项目位于 CSS 网格布局中，其中post是我用来设置段落内容样式的类。它不在 any 里面grid-template-areas，它只是已经定义的区域内的一个类。

所以缩放不顺利，我想将元素放在要包含的段落的背景中，最好的方法是什么？

我在互联网上搜索了一个使用文件加载器和 svg-inline-loader 加载 svgs 的解决方案。更重要的是，我希望选择单独使用两者，但我似乎无法正确设置 webpack.config。到目前为止，这是我的配置：

而我想要实现的是能够做到这两点：

<img id="logo" src="../assets/img/my.svg" alt="My Svg" /> 这很好地将svg加载为img。

和

import mySvg from "../assets/img/my.svg"; 这给了我 svg 内容。

我当前配置的问题是一个打破了另一个。我可能正在做一些愚蠢的事情或以错误的方式实现它，无论哪种方式，我都需要建议、帮助或任何可能使可能性发挥作用的东西......或者我必须坚持一个，这不是偏好。

提前致谢！

哦，我的临时而不是那么首选的解决方案是svg-inline-loader从配置中删除并使用以下命令将它们导入我的 js 中：

import mySvg from "-!svg-inline-loader?classPrefix!../assets/img/my.svg";

嘿嘿！

所以我有一大块内联 SVG 代码，所以我可以用一些 css 对其进行动画处理，我已经将 SVG 内联代码放在一个pastebin中，如果我把它放在这里它会很庞大。现在的问题是它没有出现在 Chrome 中。对应的 SCSS：

我已经在 Edge 上尝试过它确实显示但非常奇怪。在 FireFox 上它根本不显示，昨天一切正常，现在我在项目中走得更远了，我认为这是我后来添加的一些 SCSS，但事实并非如此。

任何帮助，将不胜感激

我有这个内联 SVG：

Microsoft Edge 会打印一条警告，指出矩形可能不会自动关闭。

错误代码是 HTML1500。

矩形可能不会自动关闭是真的吗？

也许有人可以提供一些规范的链接。

编辑：

我的问题似乎是重复的。对不起。