svg 相关问题

是否可以创建一个 SVG 笔画动画，无论笔画长度如何，其动画持续时间都相同？

在提供的示例中，较小的形状比较大的形状动画快得多，因为其笔画长度要短得多。 我的理解是将中风破折号设置为 100% 而不是......

如何改变这个svg图标的颜色？

我有以下 svg 图标，我想将其颜色更改为#2F855A： 我有以下 svg 图标，我想将其颜色更改为#2F855A： <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path class="heroicon-ui" fill="#2F855A" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/> </svg> 我该怎么做？ .icon{ width:100px; height:100px; } <svg class="icon" fill="none" stroke="#2f2f2f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> 您需要在 stroke 上使用 svg 属性。您可以选择任何您想要的值。例如 stroke="#2f2f2f 会将颜色设置为深灰色。 发现以下文章对于修复在 tailwind 项目中导入的无头图标非常有用 https://refine.dev/blog/heroicons-with-tailwind/#styles

PNG 图像转 SVG

我想制作一个响应式网站。其中一部分是增强我的图形效果。我有一些 PNG 平面图标，我想将其转换为 SVG，但我对 Illustrator 或任何其他 SVG 不了解

FFMPEG命令将图像转换为svg

用户正在我的网站上尝试将图像转换为 SVG 图像，下面我给出了该网站的链接，以及有关错误和处理媒体文件转换的代码的更多详细信息。 你可以看看l...

有没有办法使用行程破折号阵列制作 svg 圆形进度条？ [已关闭]

我一直在尝试重新创建这个进度条，但我一直坚持可以实现线之间的破折号的步骤。如果您有任何想法那就太好了。 这就是我所拥有的

将内联 SVG 转换为 Base64 字符串

我想将内联 SVG 图像发送到 PHP 脚本，以使用 Imagick 将其转换为 PNG。为此，我必须知道如何在内联 SVG 上获取 Base64 字符串。对于画布对象，它是一个简单的“.toDa...

在命令行中调整 svg 图像画布的大小

我有一堆 svg 图像（1.svg 2.svg ...），我想将它们居中并将画布大小调整为所有图像的相同值。假设图像 1.svg 有 w。 600 和 h。 800 和 2.svg 有 w。 1...

有没有办法使用行程破折号数组制作 svg 时钟

我一直在尝试重新创建这个时钟，但我一直坚持可以实现线之间的破折号的步骤。如果你有任何想法那就太好了。 这就是我所完成的...

tcl svg 渐变转换不起作用 - 渐变默默被忽略

我正在使用 tksvg 0.7.4 并注意到梯度变换不起作用。 尽管 tcl（尚）不支持某些功能，但 TIP 507 中明确提到支持此功能...

围绕 CAShape 图层绘制矩形

我是 Swift 和 Core Animation 的新手。我想在 CAShapeLayer 周围创建矩形框，就像此图中一样，但我不知道。 详细来说，我正在通过 PocketSVG 解析 SVG 图像，并...

Javascript Intersection Observer API 问题

我有一个与 Javascript 中的 Intersection Observer API 相关的问题。 我写了一些代码，其中 svg 在进入视口时“绘制自身”并“擦除自身”......

如何将鼠标悬停在文本上并更改 SVG 的悬停状态

是否可以将鼠标悬停在文本上并使状态颜色发生变化，就像悬停在文本上一样？ #我们地图{ 显示：块； 位置：绝对； 顶部：0； 左：0； 宽度：100%； 身高：...

SVG 标记的惊人动画

是否可以交错 SVG 标记的动画以与线条动画同步，即标记在其后面的线条可见的同时变得可见？ 我尝试过瞄准...

如何在 svg 路径上添加文本？

#美国地图{ 显示：块； 位置：绝对； 顶部：0； 左：0； 宽度：100%； 高度：100%； } 路径：悬停{ 中风：#ffffff！重要； 笔画宽度...

缩小 SVG 时颜色会褪色

我一直在使用纯Javascript、HTML、CSS 编写一些数学可视化。我正在研究斐波那契二进制字分形（请参阅工作示例）。为了能够看到不断成长的影像...

如何判断一个多边形是否在另一个多边形内部？

我有一个简单的示例（SVG 源），如下所示。 d 属性中描述的 id 为“rect2816”的路径： 米 140.53571,188.625 0,148.1875 273.9375,0 0,-148.1875 -273.9375,0 米 132....

垂直排列 SVG 和 div 元素之间的间距问题

我尝试在容器内垂直排列 SVG 和 div 元素，但在它们之间遇到意外的间距问题。我似乎无法弄清楚这个间距是从哪里来的......

SVG 中带孔的多边形

我很难理解如何在 svg 文件的多边形中生成孔。 这是一个例子： 我很难理解如何在 svg 文件的多边形中生成孔。 这是一个例子： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%" viewBox="2.529975092957109 41.346880553423844 23.168975806780242 22.134355770447257" stroke-width="0.00250"> <defs> </defs> <polygon fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" points="12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749" /> <polygon fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" points="14.179,52.626 14.179,52.336 13.515,52.336 13.515,52.626 14.179,52.626" /> <polygon fill="red" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" points="14.492,52.433 14.492,52.261 14.906,52.261 14.906,52.433 14.492,52.433" /> </svg> 我需要在这里更改什么才能使多边形彼此相交？ 非常感谢！ 1. 我正在将多音转换为路径。为此，我将 points 属性更改为 d 属性。另外，我在值字符串的开头添加了 M 命令。这已经足够了，尽管我会为线条添加 L 命令。 2. 我连接了两条路径的 d 属性。在这种情况下，它将创建一个洞，因为路径的第二部分（在第二个 M 命令之后）是沿相反方向绘制的（一个矩形顺时针绘制，另一个逆时针绘制）。在其他情况下，您可能需要添加 fill-rule="evenodd" 到路径。 请阅读fill-rule属性 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%" viewBox="12 52 3 3" stroke-width="0.00250"> <path fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002" stroke-linecap="square" stroke-linejoin="miter" d="M12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749 M14.179,52.626 14.179,52.336 13.515,52.336 13.515,52.626 14.179,52.626"/> </svg>

无法使用 Batik 来将 WMF 转换为 SVG 转换器

我必须将 WMF 图像转换为 SVG 图像。 我使用蜡染并得到了这个代码，但它不起作用。运行代码后，会创建一个 SVG 图像文件，但它是完全空的文件。我不知道为什么。 ...

react-native-svg 中的 LinearGradient 不起作用

我正在尝试在我的 React Native 项目中使用 SVG。这是我的组件的代码： 我正在尝试在我的 React Native 项目中使用 SVG。这是我的组件的代码： <Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}> <Defs> <ClipPath id="a"> <Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/> </ClipPath> <LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox"> <Stop offset="0" stopColor="rgb(76,209,149)" /> <Stop offset="1" stopColor="rgb(170,221,100)" /> </LinearGradient> </Defs> <G class="b" transform="translate(0 -160)"> <Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)" fill='url(#b)' /> </G> </Svg> 我得到的输出是： 我认为@enxaneta是对的，clip-path似乎不存在于react-native-svg请参阅文档，您可以在此处的文档中找到react-native-svg #LinearGradient 我认为你应该这样引用它： <Rect class="a" fill="url(#yourGradientId)" stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/> 其中 fill 应引用您的渐变 id，即 fill=url(#b) 我使用<Path>实现了以下结果 注意：我通过使用两个相互重叠的形状来实现这一点： 使用 react-native-linear-gradient 实现背景渐变的组件 以及来自 react-native-linear-gradient 的 LinearGradient 请参考以下代码。 上面例子的代码 import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'; import Gradient from 'react-native-linear-gradient' const { width, height } = Dimensions.get('window') <Gradient style={{height: height * .25,}} colors={ ['#FFD080', 'red'] } start={{ x: 0, y: 0}} end={{ x:1, y: 1}} locations={[0.18, 1, 1]}> <Svg height={height * .44} width={width} viewBox="0 0 1440 320" style={{ position: 'relative', top: height * .069 }} > <Defs> <LinearGradient id="path" x1="0" y1="0" x2="1" y2="1"> <Stop offset="0" stopColor="#FFD080" stopOpacity="1" /> <Stop offset="1" stopColor="red" stopOpacity="1" /> </LinearGradient> </Defs> <Path fill="url(#path)" d="M0,96L48,133.3C96,171,192,245,288,229.3C384,213,480,107,576,74.7C672,43,768,85,864,133.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/> </Svg> </Gradient> 我找到了一个解决方案，我不使用具有渐变的 svgs，而是将 SVG 转换为 Lottie 文件。效果很好，作为额外的优势，我们可以将 SVG 转换为简单的动画:) 效果很好： import React from "react"; import { View, Text } from "react-native"; import { Polygon, Svg, LinearGradient, Stop, Defs, G, Use,} from "react-native-svg"; const Triangle = () => { return ( <Svg viewBox="0 0 386 386"> <Defs> <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0"> <Stop offset="0" stopColor="#000" stopOpacity="0.2" /> <Stop offset="1" stopColor="#71D4EB" stopOpacity="0.1" /> </LinearGradient> <G id="polygon"> <Polygon points={"193,193 0,386 0,0"} fill="url(#grad)" strokeWidth={0} /> </G> </Defs> <Use href="#polygon" x="0" y="0" /> <Use href="#polygon" x="0" y="0" rotation="180" origin="193, 193" /> <Use href="#polygon" x="0" y="0" rotation="90" origin="193, 193" /> <Use href="#polygon" x="0" y="0" rotation="270" origin="193, 193" /> </Svg> ); }; export default Triangle;