svg 相关问题

SVG 相互覆盖 CSS 样式

我正在使用 Vue.js 并尝试为我的 Web 应用程序放置一些我在 Illustrator 中制作的 SVG 图标。我使用 Webpacks“require”加载了图标。无法通过其源访问 svg（src

从 SVG 中删除空格

我找不到更改下面代码以删除 SVG 图像中的空白的方法。我应该修改或删除什么才能实现此目的？我正在使用此网站编辑代码：https://petercolling...

添加单个 svg 路径的链接

我正在尝试将外部网页的链接添加到 svg 的单个路径上。但是，当我尝试像使用普通链接一样使用 时，它不起作用。 任何想法...

如果包含在 DIV 元素内，宽度和高度为 100% 的 SVG 会导致溢出

Codepen 示例 下面显示的 HTML 工作得很好。 它显示了一些 SVG 元素，该元素始终与其父级大小相匹配，没有任何溢出。这就是我想要的。 但是当 Codepen 示例 下面显示的 HTML 工作得很好。 它显示了一些 SVG 元素，该元素始终与其父级大小相匹配，没有任何溢出。这就是我想要的。 但是，当 <div class="svg-inner-container"> 元素被重新注释时，SVG 会导致不必要的溢出。为什么？ 相关主题/答案建议在SVG上设置display: block。但这并不能改变任何事情。 我正在使用 Brave 浏览器 Version 1.70.123 Chromium: 129.0.6668.89。 Edge Version 129.0.2792.79 有同样的问题。 这里 SVG 工作正常，因为没有使用包装器 div： // Step 0. Look at the result // Obersvation 0: The SVG perfectly matches its parents size and causes no overflow at any viewport. This is what the result is supposed to look like. But the final result also needs to use the commented out <div class="svg-inner-container"> element. // Step 1. Comment in the <div class="svg-inner-container">. // Obersavation 1: For some reason this is causing an unwanted overflow. Why? // Step 2. Perhaps This could help to understand the problem. Change the class "svg-inner-container" to "svg-inner-container-90-50". Now play with the viewport width. // Oservation 2: If the viewport width is very small, then the svg matches the 90-50 size. But if the viewport grows in width, at some point the svg height scales beyond its 50% limit. This is very confusing to me. .root{ width: 100vw; height: 100vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { width: 100%; height: 100%; } .svg-inner-container-90-50 { width: 90%; height: 50%; } .svg{ width: 100%; height: 100%; background: lightgreen; } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } <div class="root"> <div class="svg-outer-container"> <!-- <div class="svg-inner-container"> --> <svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,0 100,50 50,100 0,50"/> </svg> <!-- </div> --> </div> </div> 这里 SVG 被包装在一个额外的 DIV 中，并导致不必要的溢出： .root{ width: 100vw; height: 100vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { width: 100%; height: 100%; } .svg{ width: 100%; height: 100%; background: lightgreen; } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } <div class="root"> <div class="svg-outer-container"> <div class="svg-inner-container"> <svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,0 100,50 50,100 0,50"/> </svg> </div> </div> </div> 在 SVG 上设置 vertical-align: top 以“删除”字体下行空间 .root{ width: 70vh; height: 70vh; } .svg-outer-container{ display: grid; grid-template-rows: auto; grid-template-columns: auto; width: 100%; height: 100%; border: 2px solid red; } .svg-inner-container { width: 100%; height: 100%; } .svg{ width: 100%; height: 100%; background: lightgreen; vertical-align:top; } polygon { fill: skyblue; stroke: purple; stroke-width: 1; } body { margin: 0; } * { box-sizing: border-box; } <div class="root"> <div class="svg-outer-container"> <div class="svg-inner-container"> <svg class="svg" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,0 100,50 50,100 0,50"/> </svg> </div> </div> </div>

如何限制CSS样式仅应用于特定的SVG？

我有几个 SVG，我想使用 CSS 对其进行样式设置。然而，这些样式似乎适用于 SVG。 不幸的是，我无法在 SVG 元素或 iframe 上使用类。 有没有办法...

CSS - 更改悬停时的填充颜色 - SVG PATH

我在我的项目中使用 svg 路径使用现代 ui 图标包。 我尝试做的是更改悬停时的填充颜色。 但我没有成功.. 希望有人帮我解决这个问题。 谢谢

算法：将度数解析为 x,y 以绘制 SVG 饼图的函数

我正在使用 SVG 图形来绘制饼图。我得到了饼图的度数 - 例如 277 度 - 和直径 - 例如 200px - 我需要画一个 277 度的圆。 使用 SVG

基于这个SVG，我如何将颈部区域与头部隔离

我正在尝试改进这个身体渲染模型。 https://github.com/volcanioo/Human-Body-Rendering-HTML 但我试图添加更多细节。我首先将颈部与头部隔离......

计算高效且可扩展的 SVG 字符路径

过去两天我花了大部分时间为 Arial Rounded MT Bold 字体系列的每个 A-Z 字符绘制计算高效的 svg 路径。我需要这些路径来剪切字符...

SVG Mask 元素隐藏了屏幕上不应该放置在负坐标中的部分

包含两个片段。从功能上来说，它们应该是相同的。它们都被设计为一个遮罩，与使用遮罩的折线具有完全相同的点，并且遮罩是白色的，所以功能...

如何正确地将 svg 中的“Y”垂直和水平居中？

我有这个svg，它基本上是多边形内部的“Y”，但我无法设法将多边形内部的“Y”垂直和水平居中，这是svg： ...

是否可以只显示 SVG 图标的一半？

我目前有一个评级系统，可以产生 5 颗星，可以显示半值。我通过使用 FontAwesome 的半星来做到这一点，并使用一些 CSS 技巧使它们看起来像一颗星。但我就是这样...

动态创建的 SVG <imgae> 元素未由浏览器渲染

类似的动态创建的SVG元素不是由浏览器渲染的，但我的代码已经与他们的解决方案相对应。 我正在尝试在 HTML 中使用 SVG 标记来渲染一些文本....

如何使用 flutter_svg 解析 SVG 或捕获解析错误

我想解析 SVG 字符串来测试它是否是有效的 SVG。这可能吗？ 我在错误处理方面遇到了一些困难。 Try/catch 不起作用，RunZonedGuarded 也不起作用。看看什么...

SVG 在不同模式下不可见

我正在使用 Tailwind、Vite、React 和 vite-plugin-svgr 来渲染 SVG。我在第二次使用移动模式 ShortLogo 时遇到问题（位于旁边的 div），不知何故它不可见。我可以看到电子...

如何将圆形SVG齿形图更改为方形？

我正在修改 SVG 齿形图，我需要将其形状从圆形更改为方形。以下是我当前用于循环版本的代码： 18 ... 我正在修改 SVG 齿形图，我需要将其形状从圆形更改为方形。以下是我目前用于循环版本的代码： <div> 18 <br /> <svg width="48" height="48" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="odontogram-18-top" d="M13.5131 5.42308C15.5964 5.42308 17.5108 6.13252 19.031 7.32618L20.63 5.72713C18.6932 4.12808 16.2158 3.1709 13.5131 3.1709C10.8105 3.1709 8.33312 4.12808 6.39624 5.71587L7.99529 7.32618C9.51551 6.13252 11.4299 5.42308 13.5131 5.42308Z" fill="white" data-odontogram-condition="normal" /> <path class="odontogram-18-left" d="M4.50438 14.4323C4.50438 12.3491 5.21382 10.4347 6.40747 8.91448L4.79716 7.31543C3.20938 9.25231 2.2522 11.7297 2.2522 14.4323C2.2522 17.1349 3.20938 19.6123 4.79716 21.5492L6.39621 19.9502C5.21382 18.4299 4.50438 16.5156 4.50438 14.4323Z" fill="white" data-odontogram-condition="normal" /> <path class="odontogram-18-middle" d="M13.5131 21.1884C17.2446 21.1884 20.2696 18.1634 20.2696 14.4318C20.2696 10.7003 17.2446 7.67529 13.5131 7.67529C9.78154 7.67529 6.75653 10.7003 6.75653 14.4318C6.75653 18.1634 9.78154 21.1884 13.5131 21.1884Z" fill="white" data-odontogram-condition="normal" /> <path class="odontogram-18-bottom" d="M13.5131 23.4412C11.4299 23.4412 9.51551 22.7317 7.99529 21.5381L6.39624 23.1371C8.33312 24.7362 10.8105 25.6934 13.5131 25.6934C16.2158 25.6934 18.6932 24.7362 20.63 23.1484L19.031 21.5493C17.5108 22.7317 15.5964 23.4412 13.5131 23.4412Z" fill="white" data-odontogram-condition="normal" /> <path class="odontogram-18-right" d="M20.6188 8.91448C21.8125 10.4347 22.5219 12.3491 22.5219 14.4323C22.5219 16.5156 21.8125 18.4299 20.6188 19.9502L22.2179 21.5492C23.8169 19.6123 24.7741 17.1349 24.7741 14.4323C24.7741 11.7297 23.8169 9.25231 22.2291 7.31543L20.6188 8.91448Z" fill="white" data-odontogram-condition="normal" /> <path d="M13.5131 0.918457C6.04711 0.918457 0 6.96557 0 14.4316C0 21.8975 6.04711 27.9447 13.5131 27.9447C20.9791 27.9447 27.0262 21.8975 27.0262 14.4316C27.0262 6.96557 20.9791 0.918457 13.5131 0.918457ZM13.5131 3.17064C16.2157 3.17064 18.6931 4.12782 20.63 5.71561L19.0309 7.32592C17.5107 6.13226 15.5964 5.42282 13.5131 5.42282C11.4298 5.42282 9.51547 6.13226 7.99525 7.32592L6.3962 5.71561C8.33308 4.12782 10.8105 3.17064 13.5131 3.17064ZM20.2696 14.4316C20.2696 18.1589 17.2405 21.1881 13.5131 21.1881C9.78574 21.1881 6.75655 18.1589 6.75655 14.4316C6.75655 10.7042 9.78574 7.67501 13.5131 7.67501C17.2405 7.67501 20.2696 10.7042 20.2696 14.4316ZM2.25218 14.4316C2.25218 11.7289 3.20936 9.25153 4.79715 7.31466L6.40746 8.91371C5.2138 10.4339 4.50437 12.3483 4.50437 14.4316C4.50437 16.5148 5.2138 18.4292 6.40746 19.9494L4.80841 21.5485C3.20936 19.6116 2.25218 17.1342 2.25218 14.4316ZM13.5131 25.6925C10.8105 25.6925 8.33308 24.7353 6.3962 23.1475L7.99525 21.5485C9.51547 22.7309 11.4298 23.4403 13.5131 23.4403C15.5964 23.4403 17.5107 22.7309 19.0309 21.5372L20.63 23.1362C18.6931 24.7353 16.2157 25.6925 13.5131 25.6925ZM22.229 21.5485L20.63 19.9494C21.8124 18.4292 22.5218 16.5148 22.5218 14.4316C22.5218 12.3483 21.8124 10.4339 20.6187 8.91371L22.2178 7.31466C23.8168 9.25153 24.774 11.7289 24.774 14.4316C24.774 17.1342 23.8168 19.6116 22.229 21.5485Z" fill="black" /> <path class="x-mark" style="display: none;" d="M16.0085 13.6648L21.9591 6H25.8124L17.9693 15.9176L26 26H22.1125L16.0085 18.1978L9.87042 26H6L14.0477 15.9176L6.18755 6H10.0239L16.0085 13.6648Z" fill="#FF6060" /> </svg> </div> 我尝试过调整 viewBox 并修改路径元素，但我不确定如何正确转换形状。如何更改路径来创建方形牙齿图？任何指导将不胜感激。 您可以使用属性rx来制作一个圆角矩形。 <div> 18 <br /> <svg width="48" height="48" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(2 2)"> <rect width="24" height="24" rx="10" fill="white" stroke="black" stroke-width="2"/> <path d="M-9 -9 L 9 9 M 9 -9 L -9 9" stroke="black" stroke-width="2" transform="translate(12 12)" /> <rect width="14" height="14" rx="6" fill="white" stroke="black" stroke-width="2" transform="translate(5 5)"/> </g> </svg> </div>

如何防止SVG线条粗细不一致和间隙？

我的用例可能有点独特，但我正在使用封装在 Flexbox 中的 DOM 元素创建动态大小的方形网格。每个 DOM 元素都有一个 SVG 图像背景和一个高度/宽度等于...

来自 pixiJS v8 中动态生成的 SVG 的纹理

如何在 pixiJS v8 中从动态生成的 SVG 创建纹理？ 这在 v7 中有效： 常量 testSVG = ' 如何在 pixiJS v8 中从动态生成的 SVG 创建纹理？ 这在 v7 中有效： const testSVG = '<svg viewBox="0 0 100 100" width="7" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>' , texture = PIXI.Texture.from(testSVG) 但纹理在 v8 中注销为未定义。 这个方法： const textureSource = PIXI.TextureSource.from(testsvg ) const texture = PIXI.Texture.from(textureSource) 抛出此错误： Error: Could not find a source type for resource: <svg viewBox="0 0 100 100" width="7" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg> 谢谢！ 我能够通过这个多步骤过程让 pixiJS v8 输出 svg： const renderer = await PIXI.autoDetectRenderer({ preference, clearBeforeRender: true, backgroundAlpha: 0, backgroundColor: 0x000000, width: 500, height: 500 resolution: 1, antialias: false, hello: true }); testsvg = '<SVG viewBox="0 0 100 100" fill="red" width="200" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></SVG>' const graphics = new PIXI.Graphics().svg(testsvg) , texture = renderer.generateTexture(graphics). , sprite = new PIXI.Sprite(texture) ; 如果我缺少一种在 v8 中输出 svg 的更直接的方法（类似于 v7 的单行），我仍然会感到好奇。

如何在鼠标悬停时淡出 SVG 对象

我无法让 SVG 和 CSS 一起发挥作用以获得我想要的功能。 我希望能够将鼠标悬停在图表的饼图部分上，并使中间的信息发生变化。 我想要...

flutter支持动画svg吗？

我正在尝试为我的应用程序创建一个预加载器。但我希望它是高质量的。不是 GIF。所以动画 SVG 就是我想要使用的。有没有办法将动画 SVG 放入 flutter 中？