首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将不同的颜色应用于SVG循环中的笔划-划线?

要将不同的颜色应用于SVG循环中的笔划-划线,可以通过使用SVG的<animate>元素和CSS的@keyframes规则来实现。

首先,需要在SVG中创建一个<path>元素,并设置其stroke属性为初始颜色。然后,使用<animate>元素来定义颜色变化的动画效果。在<animate>元素中,设置attributeName属性为strokeattributeType属性为CSSfrom属性为初始颜色,to属性为目标颜色,dur属性为动画持续时间。

接下来,在CSS中使用@keyframes规则来定义动画的关键帧。在关键帧中,设置0%的颜色为初始颜色,100%的颜色为目标颜色。

最后,将动画应用到<path>元素上,通过设置stroke属性为动画的名称,并使用animation属性指定动画的持续时间和重复次数。

以下是一个示例代码:

代码语言:txt
复制
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path id="path" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="red" fill="none" />
  <animate xlink:href="#path" attributeName="stroke" attributeType="CSS" from="red" to="blue" dur="2s" repeatCount="indefinite" />
  <style>
    @keyframes colorChange {
      0% { stroke: red; }
      100% { stroke: blue; }
    }
    #path {
      animation: colorChange 2s infinite;
    }
  </style>
</svg>

在这个示例中,<path>元素定义了一个贝塞尔曲线路径,并设置初始颜色为红色。<animate>元素定义了一个颜色变化的动画,从红色到蓝色,持续时间为2秒,无限重复。@keyframes规则定义了动画的关键帧,从红色到蓝色。最后,通过CSS的animation属性将动画应用到<path>元素上。

这样,SVG循环中的笔划-划线就会以动画的方式从初始颜色过渡到目标颜色。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于TensorFlow循环神经网络生成矢量格式伪造汉字

就像char-rnn如何将特朗普的话生成特朗普智慧一样,我想能够传入大量猫.svg图片,并有一个算法来创建新矢量化图片。...不同于字符生成例子,其中pdf对于每个可能字符只是一堆离散概率,而sketch-rnn则需要用连续概率分布统计横、纵方向位移,以及在下一步中笔从纸上被提起概率(这被称为笔划结束概率)。...连接起来黑点代表笔划,LSTM和MDN算法将不断估算下一个点位置混合高斯概率分布。这意味着下一个位置取决于许多不同位置混合(用不同浓度红色椭圆表示)。...关于粒度和路径到线条转换具体细节,请参考代码。 下面是从KanjiVG中提取训练字符一些训练例子: [来自KanjiVG数据集训练实例。不同颜色表示每个汉字不同笔划。]...如果有人对如何将LSTM神经网络有效地压缩成小JSON文件有任何想法,我们可以来交流一下。

2.7K80
  • 一篇文章带你了解SVG stroke属性

    stroke属性定义了给定图形元素外轮廓颜色。它默认值是none。 一、属性 1. stroke-width SVG具有stroke-width定义笔触宽度CSS属性。...例: (这是四个不同示例stroke-width) <circle cx="50" cy="50" r="25" style="...您可以使用<em>不同</em>于像素<em>的</em>单位。在[<em>SVG</em>坐标系统单位中查看所有可用单位。 运行后图像效果: ? 2....; stroke-width: 6px; stroke-dasharray: 10 5" /> 定义了一个带有虚线笔划,虚线部分宽度为10像素,虚线之间间隔为5像素...该值越接近1,则笔划越不透明。默认stroke-opacity值为1,表示笔划完全不透明。 案例中,显示了三行带有不同stroke-opacity文本顶部行 。

    1.2K10

    一篇文章教会你使用SVG 画线

    一、SVG 画直线 案例 一些简单常用SVG 画直线。 示例 <!...代码解析 : 直线起始点由x1和y1属性设置点处,直线终点由x2和y2属性设置点处,该style属性设置笔划(线条)颜色和粗细。 二、SVG 画曲折线 1....默认填充颜色是黑色。 3. 绘制一个填充绿色三角形 示例代码如下: 示例 <!...已经注意到,三角形中只有两条线是用描边颜色(深绿色)绘制。原因是,仅绘制了列出点之间线。没有画回第一点线。为此,points再次将第一个点添加到属性中。 如下所示: <!...该style属性设置笔划(线条)颜色和粗细以及填充颜色。 三、总结 本文基于Html基础,使用SVG画不一样线,画出不一样图形。

    1.6K10

    一篇文章教会你使用SVG 画椭圆

    SVG 元素用于绘制椭圆。椭圆是高度和宽度不相等圆。换句话说,它在x和y方向上半径是不同。 一、SVG椭圆示例 示例(画椭圆 ): <!...二、虚线边框椭圆 还可以使用style属性stroke-dasharray使椭圆笔划变为虚线。...注意 第二个(蓝色)椭圆是透明,以及如何通过其笔划看到红色椭圆。 四、椭圆填充 可以使用fill样式属性来填充椭圆。...五、填充有透明度 fill-opacity样式属性可被用来设置一个椭圆填充颜色不透明度(透明性)。...注意 第二个(蓝色)椭圆是半透明,从而使红色椭圆可见。 六、总结 本文基于SVG 基础,利用SVG不同样式椭圆,透明边框,椭圆填充,添加填充透明度。

    1.4K30

    网页中添加下划线方法汇总及优缺点

    另外,可以使用 text-shadow 覆盖下行字母附近划线,但必须使用与背景色一样颜色。这意味着只在纯色背景上有效,而不能应用于渐变色或者图片上。...同样要使用 text-shadow 方法伪造下划线与下行字母间隙。但是如果下划线与文本颜色不一样,或者太细,并不会像 text-decoration 那样不协调。...缺点 图片在不同分辨率、浏览器及缩放级别下可能大小不同 SVG filters 我一直在考虑使用 SVG 滤镜方法。...可以创建一个行内 SVG 滤镜元素画一条线,通过扩展文本边界遮盖下行字母附近划线。然后给滤镜一个 id ,通过 filter: url(‘#svg-underline’) 在 CSS 中引用它。...对于单行文本,使用 border-bottom 以及你希望配合使用其它属性。 如果想要在渐变或者图片背景上避开下行字母,尝试使用 SVG 滤镜。或者避免使用下划线

    2.6K100

    TensorFlow中生成手写笔迹Demo

    在IAM数据库中,大约有13000条不同手写笔迹例子,这些例子都是从一个数字化笔划数据中记录下来。...(sample, per_stroke_mode = False) draw_strokes_random_color(sample) 4.PNG 从上面的图中我们可以看出,每个点或笔划颜色都是随机...在获得参数之后,下一个笔划概率密度将被定义为: 6.PNG 与前面的例子不同是,所有权重都会存储在一个叫做球张量(global tensor)变量类型中。...我们还为LSTM图层每个输出层引入了DropOut来规范训练,以避免进行过度训练。但是我们没有将DropOut应用于输入层,因为写东西顺序性和路径依赖性意味着它不会错过一个笔划结束。...我们随机地从这个分布中抽取一组值,然后把这个点加到我们在这个过程中建立一个.svg文件中,并记录下网络状态。

    2.6K70

    一篇文章带你了解SVG 转换知识

    SVG 转换在SVG图像中创建形状。例如,移动,缩放和旋转形状。这是显示垂直或对角线文本便捷方法。...注: 元素transform 和 transform属性。 该属性指定要应用于形状变换。在此示例中,应用了平移和旋转。两者都将在本文后面解释。 二、哪些元素可以转换?...可以将变换应用于所有SVG形状。还可以将变换应用于 元素,从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。...注意: 缩放后矩形(黑色)笔划宽度也是如何缩放,并且在x轴和y轴上缩放比例不同。 4. 偏斜 skew() skewX()和skewY()函数偏斜x轴和y轴。...实际上,这些函数会根据以度为单位指定某个角度来倾斜给定轴。 显示具有不同skewX()值矩形一些示例。

    1.8K10

    SVG 线条动画基础入门知识

    class:就是我们熟悉 class 类选择器 width | height: 定义 svg 画布大小 viewbox: 定义了画布上可以显示区域,当 viewBox 大小和 svg 不同时,...也许你会对fill、stroke-width等属性有点懵,下面看看他们描述: fill:类比 css 中 background-color,给 svg 图形填充颜色; stroke-width:类比...css 中 border-width,给 svg 图形设定边框宽度; stroke:类比 css 中 border-color,给 svg 图形设定边框颜色; stroke-linejoin |...stroke-linecap:设定线段连接处样式; stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔宽度; stroke-dashoffset:则是划线与间隔偏移量...属性 stroke-dasharray 可控制用来描边划线图案范式。 SVG 矩形只留底边 这里我们给按钮添加stroke-dasharray: .shape { ...

    2.9K30

    Android Kotlin制作签名白板并保存图片

    学更好别人, 做更好自己。...——《微卡智享》 本文长度为899字,预计阅读3分钟 前言 最近项目中要加一个人员签名存根,在Android实现一个手写签名功能,然后签名完成图像需要保存图片留底,那这篇我们就来做一个手写签名白板...实现效果 代码实现 微卡智享 实现手写签名,需要我们自己定义一个SignatureView,继承自View,里面定义画笔和划线路径,然后重写其onTouchEvent,根据其划线路径进行画笔操作...drawRect = RectF() //初始化数据 init { //设置抗锯齿 paint.isAntiAlias = true //设置画笔颜色...it.drawPath(path, paint) } super.onDraw(canvas) } } 几个重点 绘制图像时使用postInvalidate,根据定义划线区域设置

    68830

    【Web动画】SVG 线条动画入门

    class:就是我们熟悉 class width | height: 定义 svg 画布大小 viewbox: 定义了画布上可以显示区域,当 viewBox 大小和 svg 不同时,viewBox...莫慌,其实很多和 CSS 对比一下非常好理解,只是换了个名字: fill:类比 css 中 background-color,给 svg 图形填充颜色; stroke-width:类比 css 中 ...border-width,给 svg 图形设定边框宽度; stroke:类比 css 中 border-color,给 svg 图形设定边框颜色; stroke-linejoin | stroke-linecap...:上文稍微提到过,设定线段连接处样式; stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔宽度; stroke-dashoffset:则是虚线偏移量 重点讲讲能够实现线条动画关键属性...属性 stroke-dasharray 可控制用来描边划线图案范式。 它是一个和数列,数与数之间用逗号或者空白隔开,指定短划线和缺口长度。

    2.3K21

    SVG精髓阅读笔记

    计算机中描述图形信息二大系统是栅格图形和矢量图形,在栅格图形系统中,图像被表示为图片元素或者像素长方形数组,每个像素用其RGB颜色值或者颜色表内索引表示,这一系列像素也称为位图....在矢量图形系统中,图像被描述为一系列几何形状,矢量图形阅读器接受在指定坐标集上绘制形状指令,而不是接受一系列已经计算好像素.有人把矢量图形描述为一组绘图指令,而位图则是在特定位置填充颜色点....个单位坐标系统 属性viewBox宽高比可以不同于视口宽高比,在这种情况下SVG可以做三件事...Svg支持嵌套坐标系统将一个svg元素插入到一个新文档中 Svg基本形状 线段 笔画特性:stroke-width 笔画颜色stroke...,二个值为nonzero 默认和evenodd 折线 不会自动闭合 当使用 和划线时,可以为stroke-linecap指定不同值来确定线头尾形状

    1.4K20

    Power BI 矩阵聚光灯高亮深化

    白茶老师在他文章《BI技巧丨矩阵高亮》介绍了一种交叉显示效果,选中一个维度,该维度背景色突出显示,选中两个维度,两个维度均突出显示,且交叉格子颜色加深。...本文在白茶老师工作上进一步深化,使得高亮效果更加丰富。效果展示: 下划线高亮 顾名思义,颜色高亮同时添加下划线提示。...第一次条件格式使用白茶老师颜色高亮度量值,添加到背景色。第二次条件格式使用上方度量值添加到WebURL: Power BI会自动为WebURL值添加下划线。...高亮.条件格式图标 = VAR IconFiltered = "被选中维度SVG图标代码" VAR IconOne = "维度交叉SVG图标代码" VAR DateFilter = ISFILTERED...SVG打开了白茶老师这个高亮方案魔法之门,比方让交叉值闪烁起来: 交叉背景变为菱形: 这仅仅是一个开始。

    19110

    Power BI 模拟豆瓣人性化涂鸦

    实现原理是SVG矢量图。...首先,搜索引擎搜索SVG在线编辑器,随便进入一个,使用铅笔工具按需画个不规则圈或者下划线,画圈尽量沿着画布四周,为给数据留下中部空间;画下划线尽量靠下,为避免下划线与数据重合。...画好后,点击文件-保存图片,图片被保存为SVG类型。 记事本打开图片,可以看到下面的代码,中间path就是你画不规则线条,查找替换把文件中双引号都替换为单引号。...打开Power BI,新建如下度量值: 度量值分为三个部分,起始为SVG标准语法,注意里面的width、height值与你在线画图画布值保持一致,此处都是100个像素;中间path是复制SVG...接下来有个问题,颜色可否自定义?path中stroke确定了颜色,此处可以变更为条件显示,下方波浪线示例为大于100%青绿色,否则红色。

    43220

    SVG 与媒体查询结合使用

    Buckler 教程“如何将可缩放矢量图形添加到您网页”讨论了使用和详细信息。...尽管我们不能对 SVG 文档使用大多数 CSS 属性,但我们可以使用 CSS 来更改元素颜色。...单位对于 SVG 属性是可选。另一方面,CSS 值需要单位。长度和百分比对于此处提到属性都有效,但请注意,长度在 SVG 文档中作用略有不同。请记住,SVG S 代表可扩展。...SVG 元素计算大小还取决于: 根 SVG 元素计算width和height 根元素viewBox属性值 应用于元素或其祖先任何缩放变换 换句话说,我们角元素是(20, 50),(...奇数值确定划线长度。偶数值确定间隙长度。甲stroke-dasharray值5, 10装置,该行程将5px长带间隙10px每一划线之间。

    6.2K00

    CSS 删除线:在 CSS 中使用文本装饰和划线

    但它也可以用于不同事情。删除线可以应用于 span 元素、段落、div、显示内联块或任何其他需要文本修饰元素。除了下划线、斜体和粗体,CSS 删除线也是通过 HTML 元素传达信息好方法。...今天,我们将看看如何在CSS或 HTML 中使用删除线(称为划线),为什么要使用它,以及什么时候不应该使用它。我们还将了解如何将删除线/划线与其他文本修饰一起使用——以及文本修饰一般工作方式。...设置由 text-decoration-line 添加线条样式。• 文本装饰颜色。设置由 text-decoration-line 添加线条颜色。...这些属性可以更改放置在文本上线条、样式和颜色,例如蓝色下划线。如何使用删除线 HTML 标记?HTML 删除线标记用于表示已删除文本。它看起来像这样:罢工!...因此,如果您需要确保您文本在任何浏览器中都可读, 标签是一个很好后备方案。CSS 也可用于设置删除线文本样式。例如,您可以使线条变粗、更改颜色或使其闪烁。

    1.5K00

    Microsoft Tech Summit 2018 课程简述:利用 Windows 新特性开发出更好手绘视频应用

    手绘视频应用开发     手绘视频 UWP 应用开发,基于对不同手绘元素,如文字,SVG,位图,Ink 等解析,基于 Win2D 渲染方式进行动画展示,并基于类 FFMpeg 方式进行动画视频合成...SVG 手绘     SVG 元素是一种矢量图形,因为它矢量属性和文件组成,它路径数据可以在手绘视频中被还原和绘制出来,是手绘视频中重要元素。    ...简单处理过程包括:SVG 元素解析和静态展示;根据动画时长和路径直线总长度,计算每帧绘制部分路径;按照计算结果绘制路径,完成后进行 SVG 填充色绘制。  4....而平台组件包括 InkCanvas 和 InkToolbar,利用它们可以完成 Ink 接收和显示,以及笔触选择、粗细和颜色选择等操作; 2....与手绘视频结合包括:实现点选操作,代替鼠标或手指;在 Ink 中作为文字和笔划输入,或橡皮擦除笔划;利用 Surface Pen 能够更好发挥 Ink 作用,实现不同笔触和线条,不同压感,并把这些线条实现手绘动画

    1.2K30
    领券