如何制作一条svg动画虚线？
要制作一条SVG动画虚线，可以通过SVG的<path>元素和<animate>元素结合来实现。
以下是一种实现方式：
- 首先，在SVG文档中创建一个<path>元素，并设置其属性d为定义虚线的路径。例如，可以使用M命令移动到起始点，然后使用L命令绘制一条直线。如下所示：
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<path id="dash-line" d="M50 200 L350 200" fill="none" stroke="black" stroke-dasharray="5,5" stroke-width="2" />
</svg>- 接下来，使用<animate>元素来实现路径的动画效果。在<path>元素内部添加一个<animate>元素，并设置其属性values为起始路径和结束路径，duration为动画时长，repeatCount为动画重复次数。如下所示：
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<path id="dash-line" d="M50 200 L350 200" fill="none" stroke="black" stroke-dasharray="5,5" stroke-width="2">
<animate attributeName="d" dur="3s" repeatCount="indefinite"
values="M50 200 L350 200; M50 200 L350 300" />
</path>
</svg>在上面的代码中，<path>元素的d属性在两个值之间变化，从起始路径M50 200 L350 200到结束路径M50 200 L350 300。动画的时长为3秒，并且设置为无限循环。
通过以上步骤，就可以制作一条SVG动画虚线。根据实际需求，可以调整路径和动画的属性值来实现不同的效果。
推荐的腾讯云相关产品：无
SVG动画虚线的示例代码参考链接：点击这里
相关·内容
我正在尝试使用svg和一个名为Vivus的jQuery插件来创建路径动画，该插件可以帮助创建动画svgs。我遇到的问题是，我的路径被划掉了，因为它只有一条路径，所以当脚本运行时，它会以一条直线将它连接起来。我试着手动创建每条虚线，但看起来不太好。我的问题是，是否有一种方法，使一条虚线，然后将每条虚线划分成自己的路径？或者我还有什么办法可以做到这一点呢？
下面是我所说的路径：
浏览 6提问于2015-11-25得票数 1
回答已采纳
我正在做一个设计，需要一堆不同的虚线动画。我需要做好这段代码所做的工作：
但是当我把我自己的SVG代码拷贝到那支笔里时，它就不动了。
这是我的SVG代码：
<svg width="1400px" height="892px" viewBox="0 0 1400 892" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="
浏览 0提问于2019-08-20得票数 0
1回答
我有这个SVG动画，现在如果您看到SVG，您将看到虚线被绘制，绘制线条的代码如下所示：
$(document).ready(function() {
$("#sec-three").waypoint(function(direction) {
/* code for first line animation */
var offset = parseInt($('#move-opacity').attr("offset"));
setInterval(function() {
$('#move-
浏览 3提问于2015-12-01得票数 1
回答已采纳
0回答
SVG使虚线实线
、、、、
我有一个通过JS和CSS生成动画的SVG元素；SVG是从Illustrator导入的。我的动画运行得很好，所以这更像是一个SVG (可能还有CSS)问题。
SVG中有一小部分有一些虚线；其目标是到处都有规则的实线。理想情况下，我希望仅通过CSS来实现这一点，但如果修改SVG元素是唯一的选择，那么就这么做吧：
其中一条虚线：
<line xmlns="http://www.w3.org/2000/svg" class="st10" x1="538.7" y1="147.6" x2="633.9" y2
浏览 16提问于2017-11-30得票数 0
回答已采纳
2回答
动画化背景图像上的svg
、、、、
我有一个任务看起来是这样的：
我需要动画(绘制)这条虚线的背景图像(或只是<img /> -不重要)。我曾经使用SVG path、stroke-dasharray和stroke-dashoffset创建*2 来制作这样的动画--第一个是实心的，第二个是虚线的*。
但在这种情况下，第二个path需要有相同的颜色作为背景，在我的情况下，这显然不会发生，因为图像。
我制作是为了展示我目前所拥有的。
不过，我的问题是:甚至有可能在某些图像之上实现这种类型的动画？
浏览 2提问于2017-05-12得票数 1
回答已采纳
1回答
我试图用stroke-dasharray动画化Snap.svg，但没有让它发挥作用:什么都没有发生。目标是将一条直线动画成虚线。
SVG
<svg>
<line fill="none" stroke="#008D36" stroke-width="2" stroke-miterlimit="10" x1="175" y1="153" x2="175" y2="21" id="Line"/>
</svg>
CS
浏览 1提问于2014-07-09得票数 0
回答已采纳
3回答
对svg虚线的绘制进行动画处理
、、、、
我尝试用一条虚线来动画一个箭头，就像这样->，但是使用了水平和垂直的路径，使用svg和css动画。
我尝试了几种不同的方法，使用底部和顶部来设置高度和宽度的动画，但每种方法都有一些看起来不太好或效果不太好的地方。
我设法用svg绘制了一条路径，但动画实际上会删除虚线，只画一条实线。
无动画：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x=
浏览 6提问于2014-06-04得票数 4
1回答
内联-SVG动画最佳实践
、、、、
动画内联SVG的方法是什么？！我想在路径上做一些动画。就像在某些事件上旋转一样，多个路径上的animateMotion也由某些事件触发。
我将包含一个到Dev-site的链接：。我正在努力完成以下工作；
当电源插头(就在“portfolio”上方)连接到female (现在已连接到网站)时，较粗的破折号将从页面顶部一直延伸到底部(当前可视化)。我在想这些虚线上的路径动画(所以速度取决于路径的长度，应该在前一条路径结束时开始)。虚线是jQuery在Ajax-call中插入的十几个SVG。
有没有人有什么好主意来解决这个问题？SMIL，Raphael/D3.js (SVG已经在DOM中了)？编辑:
浏览 5提问于2013-03-04得票数 1
我正在尝试制作一个css圆的动画。当用户悬停它时，圆的边框应该变成一条虚线，并且它应该像旋转的轮子一样动起来。我可以让它在给定的时间内旋转，但我找不到一种方法来制作它的动画，直到鼠标指针悬停在它上面，然后当鼠标指针移出圆圈并制作一个虚线边框时停止动画。
html
<div>
</div>
css
div {
background: red;
border: 5px solid green;
width: 200px;
height: 200px;
border-radius: 50%;
transition: all 5s
浏览 4提问于2013-06-22得票数 2
回答已采纳
1回答
我正在使用velocity.js为一个项目制作这些虚线(SVG)。
但是，经过几次循环后，动画开始出现很大的滞后。
我已经在下面的代码中粘贴了我的动画的链接。
for (i = 1; i <= 69; i++) {
$("#gold2 .cls-" + i)
.velocity("fadeOut", {
delay: g2,
duration: 800,
})
.velocity("fadeIn", {
delay: 15,
dur
浏览 0提问于2016-07-21得票数 1
1回答
我有一条虚线灰色线的SVG。我想要做的是覆盖在绿色SVG虚线上，并用动画显示绿色。有点像一个从右向左移动的仪表。
我看到了一个例子，说明如何画一条破折号：
但我的台词已经被冲淡了。
最后我做了这个：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="
浏览 0提问于2015-04-21得票数 6
回答已采纳
我是svg的新手，想知道如何创建这个形状。我已经设法创建了一条简单的虚线。我在想，是否有可能创建两个形状，然后将它们放置在一起，使其看起来像一个整体。ORRR我可以只使用svg制作这个形状吗？
<svg height="150px" viewBox="0 0 200 300">
<line
x1="100" x2="100"
浏览 3提问于2017-06-29得票数 1
1回答
我得到svg线动画从代码。它有3线动画。两个虚线动画和一个实线动画。我想要实线动画与笔画。我试着使笔触变得坚实，但没有得到动画。虚线动画是可见的，但实线动画是可见的划在圆圈的移动。
"http://codepen.io/mattsince87/pen/snqLy"
浏览 1提问于2016-04-25得票数 1
回答已采纳
1回答
我试图找到一种方法来画一个像这样的动画破折号线。
这个解决方案的问题是，在虚线下画出一条黑线。问题是，我希望中间部分(破折号之间的空格)是透明的，将这个动画放在地图图像的顶部，而不是填充颜色(就像本例中的白色)。
我尝试了不同的设置-dasharray和行程-dashoffset属性，但所有这些结果都不像我搜索的方式。
目前，我直接将svg对象嵌入到HTML文档中。svg标记包括path标记，这是为路径本身推荐的。我试图用简单的css动画关键帧来实现动画，例如：
@keyframes dash
{
from
{
strok
浏览 1提问于2015-07-29得票数 2
1回答
HTML5为虚线设置动画
、、、、
作为HTML5游戏的新手，我只是想问一下，是否有人知道是否有可能沿着一条路径动画一条虚线？想想诺基亚时代的蛇，只有一条虚线...
我有一条虚线(表示电流流动)，我想将其动画化为“移动”，以显示电流正在流向某物。
感谢Rod在帖子上的回答，我已经有了虚线，但不确定从哪里开始移动它。有人知道从哪里开始吗？
谢谢!
浏览 2提问于2011-05-16得票数 4
回答已采纳
1回答
我制作了这个简单的SVG动画，用于绘制虚线的代码如下：
$(document).ready(function() {
var offset = parseInt($('#move-opacity').attr("offset"));
setInterval(function() {
$('#move-opacity').attr("offset", offset + "%");
if (offset < 100) {
$('#last-opac
浏览 0提问于2015-12-01得票数 0
回答已采纳
5回答
如何制作虚线。查看附图以了解更多信息。
目前我使用的是直线(CSS)和交叉线(SVG)。我想用虚线代替实线。
交叉线代码
<svg height="170" width="150" class="line1"><line fill="none" stroke="#496e97" stroke-miterlimit="10" x1="4" y1="70" x2="143" y2="172"/></svg>
浏览 0提问于2014-04-26得票数 0
1回答
我试图弄清楚为什么在这个SVG动画中有一条线是我想要制作的。但是它只是用css动画它的效果，它不是SVG本身的一部分。这似乎是一些中风，但stroke: none不影响它。
PS:我也很感激你能指出如何让咖啡的全部宽度svg超过杯子的宽度，这样看起来就更无缝了。
浏览 3提问于2022-08-29得票数 0
回答已采纳
1回答
我有一个SVG，我正在尝试动画，我正在使用下面的jQuery。我真正想做的是制作一个被绘制的虚线的动画，同时保持点的完整。
$(function () {
$("#dotted-lines path").css({
'fill': 'none'
});
var length;
$("#dotted-lines path").each(function () {
var $this = $(this);
length = $this[0].get
浏览 2提问于2015-11-26得票数 0
回答已采纳
2回答
我正在制作一个图像编辑应用程序，并需要在屏幕上显示选择区域。在Illustrator、Photoshop、GIMP和其他所有工具中，这都是使用动画虚线显示的，这种虚线就像是在选区周围爬行。
我需要做同样的事情。如何在Cocoa中将这样的动画线条放在视图上？
浏览 1提问于2012-04-04得票数 1
回答已采纳
有没有一种方法可以使用java.awt的BasicStroke生成动画虚线？我的愿望是有一条连续的虚线，就像photoshop的矩形标记工具的线条动画一样。
浏览 2提问于2012-03-19得票数 3
回答已采纳
注意:我有一种感觉，这个问题的答案将依赖于通常用于回答有关动画svg路径的问题的虚线笔法(例如，以及无数其他类似的问题)。如果可能的话，我正在寻找一个不依赖虚线的答案。
假设您有一个SVG，它在多个对象之间有一条路径。你知道物体的中心位置和宽度。原则上，您可以计算出一条只从每个对象的边缘走来的路径。然而，这可能是乏味的。那么，如何指定从对象1到对象2的路径，但偏移绘制的部分，使其仅从边缘显示？
在下面的代码中，两个点之间的第一条路径使用它们的中心。这就是我要指定路径的方式。第二条路径是我希望呈现路径的方式。例如，我正在寻找像offset-from-start=10和offset-from-en
浏览 2提问于2018-03-21得票数 1
回答已采纳
1回答
var path = document.querySelector('.path');
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition =
'none';
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
pat
浏览 18提问于2017-07-15得票数 0
1回答
我试图制作这个类似折纸的动画，但是Snap.svg只选择了一条路径--第一条是动画。
我已经尝试过将path = s.select( 'path' )更改为path = s.selectAll( 'path' )，就像文档中所说的那样，但是它不起作用。
知道我哪里错了吗？
下面是代码：
浏览 0提问于2014-06-10得票数 1
回答已采纳
1回答
动画自定义矢量形状
、、、、
我想动画下面的矢量形状，不幸的是，由于边缘转换成路径是不可能的。(如果有人知道如何将形状保持为一条路径，那就值得称赞了！)
我们的目标是制作一个符合形状的动画：
我在玩SVG动画，但它似乎不可能动画一个形状。路径动画是可能的。我的问题是，是否有可能像在附加的小提琴中使用<canvas>元素并将其动画化？
浏览 1提问于2017-03-29得票数 1
回答已采纳
1回答
自去年以来，我一直在使用HTML5 canvas在我的应用程序中制作动画。一切都很好，但我绝对不喜欢画布提供的图形质量和分辨率。当我比较SVG和canvas的图形质量时，我绝对感到惊讶，因此我想转到SVG动画，而不是使用canvas。但问题是，我无法理解如何制作与canvas中相同的动画，以便在SVG中工作。
某些动画，或者更确切地说，我的大多数动画都包含了精灵动画(从精灵中渲染图像，并使用重绘画布对其进行动画处理)。我想知道这是否可以使用SVG来完成，因为我不想将canvas用于sprite动画，而将SVG用于其他动画。有没有制作SVG动画的好教程或起点？任何信息都会很有用。谢谢!
浏览 0提问于2013-06-14得票数 2
回答已采纳
2回答
我正在使用的最新版本来绘制和动画SVG中的path：
var s = Snap('#svg');
var getPath = s.path('M15 15L115 115');
var pathLength = getPath.getTotalLength();
getPath.attr({
stroke: '#000',
strokeWidth: 5,
strokeDasharray: pathLength + ' ' + pathLength,
strokeDashoffset: pathLength,
s
浏览 2提问于2014-07-06得票数 2
回答已采纳
1回答
上下移动水平线
、、
我有一个SVG型的温度计。我想使用Snap创建一些动画。我可以用给定值对文本进行动画处理，但不能对屏幕截图中显示的虚线进行动画处理，以便根据给定值进行移动。我怎么发动汽车呢？
以下是我的代码
const svg = Snap(this.svg);
const { color } = this.state;
svg.line(55, 366, 90, 366).attr({
id: 'marker-line',
stroke: color,
strokeDasharray: '2 4',
s
浏览 3提问于2017-05-10得票数 0
1回答
我正在制作一个包含图形的图形用户界面，并且我知道如何创建一个虚线的BasicStroke并将其应用于Graphics2D对象，因此当我调用drawLine()时，这条线是虚线。我不明白的是，是否有一种简单的方法可以使一条虚线在多个线段上连续。也就是说，我有一个值数组，用作图形同一条线上的点的位置，但当我单独绘制每个线段并应用虚线笔划时，虚线模式将为每个线段重新开始。我的一些线段有不同的长度，因此虚线模式看起来完全混乱(在线段比模式短的地方，它看起来像一条连续的、非虚线的线)。
有没有什么简单(或不那么简单)的方法来解决这个问题，并在不同的线段上获得连续的虚线外观？如果我的解释有任何不清楚的地方
浏览 2提问于2012-02-22得票数 2
回答已采纳
我正在尝试使用Lottie库编写jetpack
对于动画图像，我制作了动画svg文件。
但是在中，动画的svg文件转换为静态json文件，而我并不打算这样做。
如何将动画svg文件转换为动画json文件？
浏览 17提问于2022-02-04得票数 0
1回答
我发现下面的代码使用css3动画和svg画布渐进式绘制一条线。唯一的问题是我希望这条线是虚线，但我不确定如何修改它才能做到这一点，更改笔划dasharray似乎没有任何作用。谢谢!
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<style type="text/css">
path {
animation-name:animateDash;
animation-duration
浏览 0提问于2013-02-25得票数 3
1回答
对此处给出的解决方案的补充->
在上面的例子中，我对CSS中的过渡动画做了一些小的修改。下面给出了对CSS的更改，
.link_dashed {
fill: none;
stroke: #ff0000;
stroke-width: 1.5px;
stroke-dasharray: 20,10,5,5,5,10;
animation: dash 5s linear;
animation-iteration-count: infinite;
animation-direction: reverse;
}
@keyframes das
浏览 11提问于2020-02-21得票数 0
回答已采纳
1回答
我见过许多为iOS绘制虚线的例子。我想画一条由沿着我的路走的圆圈组成的虚线。我想使用一个形状层，以便我可以动画的笔画，以模拟它被绘制在屏幕上。
有什么建议可以根据我的路线画点吗？
相反-这不可能吗？如果是这样的话，我可以沿着一条路径排列一串圆圈，然后迭代一遍使它们可见的圆圈数组吗？但是如何沿着bezier排列圆圈呢？
浏览 2提问于2014-04-25得票数 0
回答已采纳
1回答
我创建了一个非常简单的SVG动画，里面有两个圆，一个实心圆，一个虚线圆。设置外部虚线圆360度旋转的动画非常简单。
我想尝试的是，通过缩小10%，然后回到100%，让内部，坚实的循环“脉动”。
问题是，到目前为止，我找到的所有animateTransform文档都只涉及两个“关键帧”，即从到。因此，圆周将从100%上升到90%，然后它将重复并跳回100%。我正在寻找它“乒乓球”，去100->90->100->90等。
这可以用原生SVG动画(即没有CSS和库)来完成吗？
<svg xmlns="http://www.w3.org/2000/svg"
浏览 0提问于2016-08-14得票数 0
1回答
SVG动画点状边框路径，如进度条
、、、、
我试图动画一个点SVG圆圈，像一个进度条-填补自己在3秒内，但有一个很难达到这个效果与虚线边框。下面是我目前拥有的代码，它是动画的，但不像一个进步：
svg circle {
animation: dash 3s linear forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 100;
}
to {
stroke-dashoffset: 0;
}
}
<svg class="progress-ring" viewBox="0 0 120 120" fil
浏览 4提问于2022-01-14得票数 1
回答已采纳
2回答
如何绘制svg路径动画
、、、
我有3个发光的蓝光和2个虚线连接他们，我必须通过一个发光(就像每一个破折号是一个发光)通过线从一个到另一个蓝在一个重复的manner.So远远我能够做到这一点。..
<div class="mr-glow-1">
<svg width="401" height="332" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke-dasharray=
浏览 4提问于2017-10-18得票数 0
回答已采纳
我想找到并学习一个js库，它将允许我对我在Illustrator中创建的SVG文件进行动画处理。我在后效和动画图形方面有很大的背景，所以我正在寻找一个JS库，它将给我提供很多动画功能。
我现在正在查看BonsaiJS，我想知道是否有人可以建议我是否允许我制作SVG文件的动画，如果允许，请告诉我如何开始这样做。
现在，我将SVG嵌入到我整个站点的图像标签中。我很快写了一些示例代码来说明我的想法，如何使用盆景动画我的SVG。但是，对于处理现有的SVG文件而不是形状，有什么特殊的要求吗？抱歉，听起来含糊不清，SVG格式和JS动画库对我来说都是新的。简单地给我介绍一个使用js库制作SVG动画的教程将会
浏览 2提问于2013-04-19得票数 0
回答已采纳
我有很多对象使用相同的svg路径，这基本上是一个箭头。我想在另一个圆形的svg路径上定位对象，这样箭头看起来就像在向外“辐射”。
我读了几篇文章，其中说使用<object>对svg提供更多的控制，但我找不到如何将<object>定位到另一个svg <object>路径(循环)。
不只是手动旋转每一个<object>，我想把它们放在一条路径上，这样在未来使它们变得更容易。我想让他们从滚动的中心移出一点，我想用路径来制作动画会更容易，而不是手动绘制每个箭头的动画。
我可以像这里的那样沿路径动画，并通过将“跟随路径”上的路径更改为一个圆，但我不想动画，
浏览 5提问于2014-03-06得票数 1
回答已采纳
我正在制作一个教幼儿园孩子学习数字的学习游戏。它需要一些动画，如，但我无法在画布中顺利实现此动画。
我希望使用这条虚线显示完全相同的动画。
请指导我执行这种类型的动画。
浏览 0提问于2013-07-16得票数 0
2回答
我在画一个圆圈的线动画。我需要这个在手机上工作，所以选择了SVG。我有一个完美的工作例子，但它是非常低效的，并使页面上的其他动画口吃。
这是我目前拥有的，也是我正在努力实现的：
<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 500 500"
preserveAspectRatio="
浏览 1提问于2014-08-22得票数 3
回答已采纳
1回答
如何用90度行制作CSS背景渐变。应该从没有一行开始，然后是一条实线，而接下来的3条直线则是虚线。
浏览 8提问于2022-07-11得票数 0
回答已采纳
1回答
我对这个社区相当陌生，我也不是最善于表达意见的人。我希望我不是通过发布一个新的问题来破坏权力。我之所以再次发帖，是因为我表达了我原来的问题非常糟糕。即使经过反复编辑，这种混乱似乎也是无法挽回的。
我的问题如下：
我想使用笔画达沙雷(或其他方式)来动画一条路径。它基本上是一条垂直的路径，没有奇特的坐标。从我看到的所有例子来看，“动画”的路径是一条坚实的线条。我想动画一条虚线样式的路径。
根据我的观察，笔画-达沙雷被用来作为一种手段，目的是有一个平滑的动画为一条道路。如果我没有弄错的话，那是不是意味着我们不能再为了造型的目的而划船了？您是否必须选择如何将其作为一种零和类型的情况使用，要么只使用动画
浏览 2提问于2016-07-03得票数 0
回答已采纳
1回答
是否可以将SVG动画模型与Javascript自定义处理联系起来？具体地说，SVG动画有一个同步所有动画元素的内部时钟。此外，还有其他方法可以使用Javascript (例如setTimeout、setInternval)来制作动画。我想知道是否有任何方法可以将SVG动画与Javascript代码联系起来，这样我们就可以使用Javascript来制作一些SVG SMIL不支持的自定义动画，但仍然可以与SVG动画模型协调。
感谢你的任何想法。
干杯，布鲁斯
浏览 0提问于2014-09-11得票数 0
0回答
我想在Image上有一个动画边框。但令我惊讶的是，只有Rectangle能够提供border。我想让一条虚线绕着Image移动。如何获得这样的动画。这是我的示例代码，它只是提供了Image的边框。
Rectangle {
width: image.width + 5
height: image.height + 5
border.color: "yellow"
border.width: 5
color: "transparent"
Image {
id: image
anchor
浏览 12提问于2016-07-18得票数 0
3回答
我正在构建一个进度循环，表示用户级别最高可达三级。它包含三个环绕周边的虚线。一条与每个虚线重叠的深色线条将代表用户的进度。如果用户是一级用户，第一个破折号应该重叠等于(他们的当前经验/下一级的总经验)的量。如果用户是二级用户，则第一个破折号应该完全重叠，第二个破折号应该与上面的相同，依此类推。我用下面的代码构建了我的SVG圈子：
<svg
width="240"
height="240"
viewBox="0 0 240 240"
strokeWidth="2px"
strokeDasharra
浏览 2提问于2021-09-04得票数 0
我正在使用虚线偏移动画技术制作一个简单的微调器。你可以看看我有什么。正如你所看到的，多边形形状永远不会闭合。有没有什么简单的方法来确保路径完成形状，而不是在顶部留下斜接角。
我可以在SVG中超射路径，这样它就会重叠来完成最后一个弯道。不幸的是，你可以在动画中看到它的透支，这并不理想。
HTML
<div class="logo-container">
<svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.63
浏览 0提问于2016-04-13得票数 0
1回答
我想画一条钟形曲线，看起来像下图，用svg。因此，基本上我应该能够传递3个参数: x1、x2和height，它应该绘制一条虚线钟形曲线。实现这一目标的最佳方法是什么？
这是我用来绘制一条规则贝塞尔曲线的方法。基本上，我需要弄清楚如何将其转换为钟形曲线：
function getDimension(x1, x2, height) {
return "M" + x1 + "," + height + " C" + x1 + ",0 " + x2 + ",0 " + x2 + "," + h
浏览 14提问于2016-09-14得票数 5
回答已采纳
1回答
我不得不尝试使用jquery插件绘图SVG来制作svg动画。https://github.com/lcdsantos/jquery-drawsvg 在我的html页面中，我有两个SVG。我只需要一个接一个地制作SVG动画。 // svg 2 initialization
let svg2 = $('.outer_svg2').drawsvg({
duration: 800
})
// svg 1 initialization
let svg1 = $('.outer_svg').drawsvg({
duration: 2000,
ca
浏览 13提问于2021-06-18得票数 1
1回答
我想要一条带有非虚线箭头头的虚线，但在Safari中，这种虚线显然也被应用在标记上。
演示：
<svg width="100%" height="100%">
<defs>
<marker style="overflow:visible" id="myMarker" refX="0.0" refY="0.0" orient="auto">
<path transform="scale(-0.4) trans
浏览 0提问于2018-12-07得票数 0
回答已采纳
1回答
我有一个我制作的svg动画
动画运行得很流畅，我把它设置成动画填充模式:在动画完成后保持不动。
目前，在svg html中，我有
stroke="none"
然后在@keyframes中，我有：
from{ stroke: none; }
to { stroke: #fff; }
一旦它完成动画，我希望笔划改变颜色:悬停，它做到了。
但是一旦我把光标移开，动画就会重新开始。
在悬停完成后，我如何让SVG返回到它的#FFF笔划，而不触发动画？
浏览 1提问于2017-11-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
