svg 相关问题

OpenCV 轮廓更平滑

我正在尝试解决使用 OpenCV 在徽标周围创建路径的问题。 我附上了两个图像，tekst.png 和 tekst2.png。我还附上了一个图像 Comparison.png，显示了想要的 r...

如何在js中做svg激光笔。就像 exlidraw 或 google 幻灯片中的那样？

我尝试使用 svg 路径元素创建鼠标轨迹。 使用贝塞尔曲线进行平滑，但不知何故平滑效果不好。 有人可以帮我弄这个吗。 常量平滑 = 0.10； 功能线(

无法为 SVG 组件设置 className 属性

在从 webpack 迁移到 vite 的过程中，我遇到了以下问题。我有以下 React 组件： 从 '@styles/pages/product/other/other.module.scss' 导入 { otherQuote as other__quote } ； ...

使用SVG动画创建Android启动画面

我正在使用 Xamarin.Forms 开发一个应用程序，我正在尝试将启动屏幕插入我的 Android 项目。 我找到了一些创建具有背景颜色和统计信息的启动屏幕的教程......

React Native SVG：全屏自适应 viewBox

我正在尝试使用“react-native-svg”库制作全屏场景。 这是我的组件渲染代码： 我正在尝试使用“react-native-svg”库制作全屏场景。 这是我的组件渲染代码： <Svg viewBox="0 0 100 100" height="100%"> <Rect x="25" y="25" width="50" height="50" stroke="red" strokeWidth="2" fill="yellow" /> </Svg> 这就是我想要得到的： 但是我在横向模式下所拥有的： 还有最重要的一点。当调整大小事件发生时，块被标准化： 修复者 const viewBox = '0 0 '+this.state.screenWidth+' '+this.state.screenHeight; return <Svg viewBox={viewBox} style={styles.wrapper}> 我认为这不是最好的解决方案，但它是有效的 <YourSVG width={undefined} height={undefined} style={{width: '100%', height: '100%'}} preserveAspectRatio="none" />

通过 ID 获取元素并在 SVG Inkscape 中更改其颜色

我有一个使用 Inkscape 创建的简单绘图，这是 Inkscape 文件：

如何将书法文本制作成动画，就像手写的一样

我正在寻找一些方向，不一定是代码。 我想用 SVG 文本拼出我的名字。 到目前为止，我已经能够放置它并允许它为绘图制作动画，但这不会发生在......

SVG CSS 悬停隐藏阴影

我需要的是 SVG 消失，但阴影保持悬停。我得到的是 SVG 和阴影都消失了。 div > svg { 颜色：黑色; 过滤器：滴-...

linux centos 中 R 基础包 grDevices 中缺少 cairo.so

最近在 CentOS 上安装了 R 3.2.4，当尝试通过 R 创建 png 图表时，我收到以下警告： (function (filename = if (onefile) "Rplots.svg" else "Rplot%03...

SVG 元素不会使用 ClipPath 和 path 在另一个 SVG 元素的空间内渲染

我正在尝试使用路径和clipPath属性使SVG元素在另一个给定的SVG元素中渲染。 具体来说，我正在尝试将角色的瞳孔渲染在玩家的眼睛中......

使用 Javascript/PHP 在服务器端将 QR 码保存为图像

我正在做一个小项目，我需要在里面生成二维码和徽标。我需要将生成的 QR 码保存为 PNG 或 JPEG 格式。如果我使用 svg 格式，下面的代码可以正常工作。但我想要

在 SVG 中渲染相邻方块时出现细线

当九个白色方块相邻时，我在 Chrome 和 Edge 中出现此 SVG 中具有背景颜色的细线，但在 Firefox 中却没有。 这是 SVG 固有的还是一个错误？ 如果不是错误的话...

SVG 描边宽度在边界矩形内扩展

我已经开始使用 SVG，但（很快）遇到了障碍。 我试图找到一种方法在矩形周围添加边框，但它只能在内部“扩展”。目前我只是博士...

使用 JS/PHP 在服务器端将 QR 码保存为图像

我正在做一个项目，我想生成一个QR-Code，所以我使用这个Lib用JS生成它。它有效，但我想将二维码保存在服务器上。我不想在 CLI 上下载它...

如何在Linux中的重复文件修改过程中排除带有符号链接的文件？

我想更改一些 SVG 文件的颜色代码。通常，我使用以下 bash 脚本： #!/bin/bash 查找-名称“*.svg”-o-名称“*.SVG”|当读我时； 做 回声...

设置内联 SVG 样式时是否需要 CDATA？

我读过有关此问题的各种内容，所以我希望能对其进行明确的排序。 如果我有内嵌在 HTML 文档中的 SVG 标记，并且我使用 CSS 对其进行样式设置，我是否需要包装该 CSS...

剪辑路径高度/objectBoundingBox 在 Firefox 中不起作用

我的网站有一个效果，它使用波浪形式的剪辑路径，如下所示： 我的网站有一个效果，它使用波浪形式的剪辑路径，如下所示： <svg class="svg" width="0" height="0" preserveAspectRatio="xMidYMid meet"> <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"> <path d="M1,0 h-0.001 c-0.02,0.006,-0.03,0.079,-0.04,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 c-0.01,-0.074,-0.021,-0.15,-0.042,-0.15 s-0.032,0.076,-0.042,0.15 c-0.011,0.075,-0.021,0.147,-0.041,0.147 s-0.031,-0.071,-0.041,-0.147 C0.032,0.076,0.021,0,0,0 v1 h1 V0"> </path></clipPath> </svg> CSS .clipped { width: 100vw; height: 6vw; -webkit-clip-path: url(#my-clip-path); clip-path: url(#my-clip-path); margin: 0 auto -2px auto; } 这在所有浏览器上都能完美运行，但在 Firefox 上高度是错误的，可以在我的 codepen 中看到 https://codepen.io/shereewalker/pen/KKYvKRJ 我尝试过调整视图框和高度，但没有任何效果。 如果我通过在实际图形中重复波浪并调整 CSS 中的长度来使实际 SVG 的长度增加两倍，那么它可以工作，但在平板电脑上的纵向和横向之间切换时，它会导致问题。 我尝试将其放入 1px x 1px 插画文件中并重新导出（按照另一篇文章中的建议），以便所有数字都在 0 和 1 之间，但是当我放入新坐标时，一条蓝线就出现了似乎，虽然也许我做错了。 当我像这样包含剪辑路径时： .clipped { width: 100vw; height: 6vw; clip-path: path( "M1917.9,0h-2.6c-37.6.6-57.5,8-76.7,15.2-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.7-7.5-40.4-15.2-81-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8c-19.9-7.5-40.6-15.2-81.2-15.2s-61.3,7.7-81.2,15.2c-20.3,7.6-39.4,14.8-78.8,14.8s-58.5-7.2-78.8-14.8C61.3,7.7,40.6,0,0,0v101h1917.9V0Z" ); margin: 0 auto -2px auto; } 它适用于所有浏览器，但它不跨越屏幕的整个宽度，我似乎无法使用 CSS 修复。 我尝试了 userSpaceOnUse 而不是 objectBoundingBox 但没有任何效果。 如有任何帮助，我们将不胜感激 剪辑路径很烦人。在 CSS 中定义时，它们并不那么灵活。它们不会缩放，因此需要具有精确的尺寸。 我建议您使用 SVG 图像（整个图像，而不是遮罩或剪辑路径）作为 CSS mask-image（可以是像这里这样的数据 URI 或对 SVG 文件的引用）。 CSS 掩码具有不同的 CSS 属性，例如掩码大小、掩码位置、掩码重复等，可用于设置 HTML 元素的正确掩码。 body { display: flex; } .masked { width: 200px; height: 200px; mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8cGF0aCBkPSJNIDEgMCBoIDAgYyAtMC4wMiAwLjAwNiAtMC4wMyAwLjA3OSAtMC4wNCAwLjE1IGMgLTAuMDExIDAuMDc1IC0wLjAyMSAwLjE0NyAtMC4wNDEgMC4xNDcgcyAtMC4wMzEgLTAuMDcxIC0wLjA0MSAtMC4xNDcgYyAtMC4wMSAtMC4wNzQgLTAuMDIxIC0wLjE1IC0wLjA0MiAtMC4xNSBzIC0wLjAzMiAwLjA3NiAtMC4wNDIgMC4xNSBjIC0wLjAxMSAwLjA3NSAtMC4wMjEgMC4xNDcgLTAuMDQxIDAuMTQ3IHMgLTAuMDMxIC0wLjA3MSAtMC4wNDEgLTAuMTQ3IGMgLTAuMDEgLTAuMDc0IC0wLjAyMSAtMC4xNSAtMC4wNDIgLTAuMTUgcyAtMC4wMzIgMC4wNzYgLTAuMDQyIDAuMTUgYyAtMC4wMTEgMC4wNzUgLTAuMDIxIDAuMTQ3IC0wLjA0MSAwLjE0NyBzIC0wLjAzMSAtMC4wNzEgLTAuMDQxIC0wLjE0NyBjIC0wLjAxIC0wLjA3NCAtMC4wMjEgLTAuMTUgLTAuMDQyIC0wLjE1IHMgLTAuMDMyIDAuMDc2IC0wLjA0MiAwLjE1IGMgLTAuMDExIDAuMDc1IC0wLjAyMSAwLjE0NyAtMC4wNDEgMC4xNDcgcyAtMC4wMzEgLTAuMDcxIC0wLjA0MSAtMC4xNDcgYyAtMC4wMSAtMC4wNzQgLTAuMDIxIC0wLjE1IC0wLjA0MiAtMC4xNSBzIC0wLjAzMiAwLjA3NiAtMC4wNDIgMC4xNSBjIC0wLjAxMSAwLjA3NSAtMC4wMjEgMC4xNDcgLTAuMDQxIDAuMTQ3IHMgLTAuMDMxIC0wLjA3MSAtMC4wNDEgLTAuMTQ3IGMgLTAuMDEgLTAuMDc0IC0wLjAyMSAtMC4xNSAtMC4wNDIgLTAuMTUgcyAtMC4wMzIgMC4wNzYgLTAuMDQyIDAuMTUgYyAtMC4wMTEgMC4wNzUgLTAuMDIxIDAuMTQ3IC0wLjA0MSAwLjE0NyBzIC0wLjAzMSAtMC4wNzEgLTAuMDQxIC0wLjE0NyBDIDAuMDMyIDAuMDc2IDAuMDIxIDAgMCAwIHYgMSBoIDEgViAwIi8+Cjwvc3ZnPgo='); } .t1 { background-color: orange; mask-size: 100%; mask-repeat: no-repeat; } .t2 { background-color: tomato; mask-size: 20%; mask-repeat: repeat-x; mask-position: bottom; } .t3 { background-color: lime; mask-size: 50%; mask-repeat: repeat-x; mask-position: center; } <div class="masked t1"></div> <div class="masked t2"></div> <div class="masked t3"></div> SVG 文档 <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet"> <path d="M 1 0 h 0 c -0.02 0.006 -0.03 0.079 -0.04 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 c -0.01 -0.074 -0.021 -0.15 -0.042 -0.15 s -0.032 0.076 -0.042 0.15 c -0.011 0.075 -0.021 0.147 -0.041 0.147 s -0.031 -0.071 -0.041 -0.147 C 0.032 0.076 0.021 0 0 0 v 1 h 1 V 0"/> </svg>

将 SVG 路径弧转换为 DXF

我正在创建一个从 svg 到 dxf 的自定义转换器，需要一个数学向导来帮助我找出我的逻辑有缺陷的地方。 这是我当前的代码： 函数 svgArcToLWPolyline(rx, ry, 旋转...

为什么内部 viewBox 会改变我的比例？

简而言之： 在这个简化的示例中，我不明白为什么我的第三个十字架比其他十字架小，我希望所有十字架都是相同的 简而言之： 在这个简化的示例中，我不明白为什么我的第三个十字架比其他十字架小，我希望所有十字架都是相同的 <svg width="512" height="128" xmlns="http://www.w3.org/2000/svg"> <!-- My baseline: no viewbox, and I use percentages --> <svg x="0%" width="25%" height="100%"> <line x1="50%" y1="0" x2="50%" y2="100%" stroke="black" stroke-width="5%"/> <line x1="0" y1="50%" x2="100%" y2="50%" stroke="black" stroke-width="5%"/> </svg> <!-- With a viewbox, to be able to not use percentages but still have something independant from my viewport --> <svg x="25%" width="25%" height="100%" viewBox="0 0 100 100"> <line x1="50" y1="0" x2="50" y2="100" stroke="black" stroke-width="5"/> <line x1="0" y1="50" x2="100" y2="50" stroke="black" stroke-width="5"/> </svg> <!-- with a viewbox one level below. Why is this cross smaller? --> <svg x="50%" width="25%" height="100%"> <g viewBox="0 0 100 100"> <line x1="50" y1="0" x2="50" y2="100" stroke="black" stroke-width="5"/> <line x1="0" y1="50" x2="100" y2="50" stroke="black" stroke-width="5"/> </g> </svg> <!-- with a viewbox inside a viewbox. The size is restored by I have no clue why... --> <svg x="75%" width="25%" height="100%" viewBox="0 0 100 100"> <g viewBox="0 0 100 100"> <line x1="50" y1="0" x2="50" y2="100" stroke="black" stroke-width="5"/> <line x1="0" y1="50" x2="100" y2="50" stroke="black" stroke-width="5"/> </g> </svg> </svg> 更多背景 为什么我希望所有的十字架都是一样的： 第一个是我的基线 第二个使用非百分比坐标，但考虑到 viewBox 的尺寸，它应该是相同的（就是这种情况） 第三个与第二个相同，只是viewBox定义为低一级。但视口和 viewBox 仍然相同，所以我预计不会有任何变化（但我错了） 第四个我不明白。我注意到，当我重复我的 viewBox 指令时，我会收回我的十字架，但我不知道为什么。 我的问题的完整背景是我正在尝试创建一个平铺表。它包含一个具有不同旋转的元素，因此我在 <defs> 中定义此元素，然后在连续的子 svg 中对其应用一些 transform。我用 viewBox 定义这个元素，因为这是我知道的唯一方法，能够使用 <path>，同时仍然独立于 viewPort。但我注意到这种行为，我的一些图块具有意外的比例。 （我上面的例子没有 <defs> 和 <path> 因为我设法得到了一个比我原来的 svg 更简单的例子） viewBox被忽略了 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox viewBox 仅对元素有效： SVG 标记 图案 符号 查看

任何人都可以帮助我在react.js中的onClick事件上实现SVG的平滑过渡吗？

我想要一个汉堡图标，在 onClick 事件中它会变成“X”图标。 但我无法实现平稳过渡，有人可以帮助我吗？ 反应 从'react'导入React，{useState}； 导入...