问题标签 [inline-svg]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - React 渲染 SVG 会覆盖页面上的其他 SVG
babel-plugin-inline-react-svg在我的应用程序中使用next.js，我将一些 SVG 导入到我的 Reactv16.0.0组件中，就像这样。
当我运行该代码时，页面呈现为 3 个 SVG 都相同，如下所示：
我首先渲染的 SVG 中的任何一个似乎都接管了所有其他的。如果我把<EmptyCart />它们放在第一位，它们都将是购物车图标。但真正的问题是：当我检查 DOM 时，SVG 似乎都是正确的（它们彼此完全不同）。
有人见过这个吗？这怎么可能让 DOM 说一件事而浏览器渲染另一件事呢？
html - 如何在 IE 中做没有高度的自动缩放内联 svg？
标记，样式
HTML
CSS
示例网址
https://jsfiddle.net/rfjmanuf/
结果
火狐 58、铬 64
即 11
问题
我想知道如何像其他浏览器一样在 IE 中呈现？感谢您的阅读。
javascript - 您如何获取 svg 文件并将其用作
我的问题：
如何获取.svg文件并将其与<svg>标签一起使用，因此我还可以交互地设置它的样式（例如在悬停时），而不是像我在标签示例中所做的那样<img>？
目标：
创建一个缩略图视图，在我的主要路线上显示每个国家（149 个）的国旗'/'
问题：
我在我的 Express 代码中设置了一个静态路由，因此所有标志都可用。
server.js：
在客户端，我想获取每个 .svg 文件并将其内联到我的组件中。
我的 React 组件如下所示：
地图缩略图组件：
javascript - 用于动画目的的正确内联 SVG 标记结构？
假设我想用 Javascript 为看起来像这样的矢量设置动画。
然后我将它分成 4 个部分（头部、身体、2 条腿）并为每个部分做一些动画。
我的问题是，上面向量的正确标记结构是什么？
据我所知..有3种可能性：
团体
<svg> <g id='head'>...</g> <g id='body'>...</g> <g id='leg_1'>...</g> <g id='leg_2'>...</g> </svg>嵌套 SVG
<svg> <svg id='head'>...</svg> <svg id='body'>...</svg> <svg id='leg_1'>...</svg> <svg id='leg_2'>...</svg> </svg>每个部分的 SVG
<svg id='head'></svg> <svg id='body'></svg> <svg id='leg_1'></svg> <svg id='leg_2'></svg>
我知道有很多库可以帮助我们制作 SVG 动画，但这不是我要问的，我想知道标记结构应该是什么样子？所以我们可以更容易地操纵它们
有没有人可以给我一个关于这个的启发？
svg - css 背景属性中的内联 Svg 在 Edge 上无法正常工作
我有以下html文件
我想添加 :before 像这样的 svg 背景
sprite.svg 是一个带有多个图标的精灵。所以我想在 x 位置 =135 处从精灵接收某些图标。这在 IE、Chrome、Firefox 中完美运行，但在 Edge 中却不行。svg 和 Edge 有什么问题？
css - SVG 属性在 Firefox 中被忽略
我目前正在研究响应式 SVG。在 Chrome 上，一切看起来都很好并且可以正常工作。但是在 Firefox 上，我在 CSS 中的 cx cy cr 属性没有被应用。
在 Chrome CSS 上应该覆盖内联 SVG，但在 Firefox 上它不起作用。
ruby-on-rails - rails inline_svg 与carrierwave上传的文件
我在使用带有carrierwave上传的svg的inline_svg gem时遇到问题。当我在应该是 svg 的地方检查渲染的 html 时，我遇到了找不到文件的错误。这是因为文件没有放在资产管道中吗？
html - 使用内联 svg 时，单个图标不显示在 chrome 中
我正在使用这样的内联 svg
<use xlink:href=""></use>
但由于某种原因，Chrome 中未显示某个特定图标（但在 Firefox 和 ios Safari 中显示），其他图标在 Chrome 中可见。
这是图标本身（它是从 icomoon 导出的）
<symbol id="icon-phone" viewBox="0 0 32 32">
<title>phone</title>
<path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
</symbol>
我也尝试只使用href而不是xlink:href，但它也不起作用。
css - 是否可以在内联 svg 中使用 css 变量？
我正在为网站编写用户样式，我使用 css 变量进行用户配置。我正在尝试使用带有变量的内联 svg 来创建一个设置为用户首选强调色的复选标记。但这似乎不起作用。
在提供的代码中，我只是卡在了 var 函数中，但我也尝试将笔画的颜色设置为 currentColor 并将元素的颜色设置为变量。设置掩码和背景颜色工作，但我想要一个“纯内联 svg”解决方案。
复选标记应该是强调色。当我通过简单地放入 var() 来设置它时，它不起作用并且是透明的。有趣的是，当使用 currentColor 方法时，描边是黑色的。