使用CSS3 SVG动画向上绘制一条垂直线
使用CSS3和SVG动画可以实现向上绘制一条垂直线的效果。下面是一个完善且全面的答案：
CSS3是一种用于网页样式设计的技术，它可以通过添加样式来改变网页的外观和布局。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以用来绘制各种图形和动画效果。
要实现向上绘制一条垂直线的效果，可以使用CSS3的动画和SVG的路径绘制功能。首先，我们可以使用CSS3的@keyframes规则定义一个动画，让线条从底部向上绘制。然后，使用SVG的<path>元素来绘制一条垂直线，设置其起点和终点的坐标，并将动画应用到该元素上。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes drawLine {
from {
stroke-dashoffset: 100%;
}
to {
stroke-dashoffset: 0;
}
}
svg {
width: 100px;
height: 200px;
}
path {
fill: none;
stroke: black;
stroke-width: 2px;
stroke-dasharray: 100%;
animation: drawLine 2s linear forwards;
}
</style>
</head>
<body>
<svg>
<path d="M50,200 L50,0"></path>
</svg>
</body>
</html>在上面的代码中，我们使用@keyframes规则定义了一个名为drawLine的动画，通过改变stroke-dashoffset属性的值，实现了线条从底部向上绘制的效果。然后，我们创建了一个SVG元素，并在其中添加了一个<path>元素，设置其起点和终点的坐标为(50, 200)和(50, 0)，并将动画应用到该元素上。
这样，当页面加载时，就会看到一条垂直线从底部向上绘制的动画效果。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活选择配置，支持多种操作系统和应用场景。了解更多信息，请访问：腾讯云云服务器
- 腾讯云对象存储（COS）：提供高可靠、低成本的对象存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问：腾讯云对象存储
以上是关于使用CSS3 SVG动画向上绘制一条垂直线的完善且全面的答案。
相关·内容
2回答
基本垂直SVG线
、、、、
我似乎找不到一个好的，工作的例子/教程，如何绘制一条简单的垂直线，它在滚动中从无到有逐渐显示动画。
我有下面的代码来绘制一条水平线，但我似乎无法成功地将其更改为一条继续动画的垂直线。
HTML：
<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle" d="M1 0 L75 0"/>
</svg>
CSS：
#mySVG {
position: fix
浏览 12提问于2016-08-08得票数 0
回答已采纳
1回答
我有一系列向后的形状--在SVG路径表示法中用Raphael绘制的‘L’形状--只是一个数据点的集合，每个数据点由一条水平线和一条垂直线表示，长度不等。
<div id="canvas"></div>
<script>
var data = [
[{x: 32, y: 207}, {x: 50, y: 371}],
[{x: 34, y: 209}, {x: 39, y: 34}],
[{x: 32, y: 216}, {x: 58, y: 38}],
[{x: 70,
浏览 2提问于2012-12-05得票数 2
回答已采纳
我是SVG动画的新手。如何使用CSS3 SVG动画增加垂直线？这条线应该从底部开始，向上增长到自定义高度(例如0到100)。我有以下代码：
<svg height="210" width="10">
<line x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:3" />
</svg>
这是初始位置。我尝试增加y2值，但它向下增长，这是我不想要的。请给我一
浏览 26提问于2016-08-10得票数 0
2回答
我想在某个"x“(标量)值上绘制一条直线，这样每秒就会绘制一条具有某些值的垂直线。我知道绘制垂直线的一种方法(不考虑时间)是声明一个向量，如下所示：
y=0:0.01:5;
或者类似这样的东西：
y=3:0.01:6;
并编写plot(x,y);
另外，我用"pause“参数做过”动画“绘图，但我不知道在这种情况下该怎么做。谢谢你的帮助。
浏览 1提问于2015-02-08得票数 3
回答已采纳
1回答
我想在现实世界中构造一个三角形，使用用户的坐标、方向(当前朝向正北的度数)和表示他们可以看到多远的固定距离来表示2D“观察平截体”。
我想象着在标题方向上绘制一条距离用户的点K1距离的线，并标记一个临时点，然后在该点上绘制一条与前一条线的垂直线，并在垂直线的每一侧上标记两个点，该垂直线与该点的距离为K2。
这将为我提供所需的3分。对于那些擅长数学的人来说，第一，这是可能的吗?第二，你能给我一些关于如何实现这一点的建议吗？谢谢。
浏览 3提问于2011-05-27得票数 0
1回答
使用下面的代码绘制多于~5+的SVG线会在移动元素时造成性能波动，特别是在绘制较长的SVG线时。这只是一个自然的SVG性能限制(因为svg画布大小)，还是我的代码有什么问题？
项目运行中可以在这里看到(到目前为止只支持Chrome和Firefox，查看左下角的fps，尝试展开对象，我在启动时得到大约14fps)：
一些解释：
svg是由jQuery.svg创建的一个大的(100%*100%) SVG.rootElement元素，放置在所有的HTML下。elem1和elem2是可拖动的HTML元素，而不是SVG元素。我用一条SVG线连接elem1和elem2，当它们移动时，这条线就会跟着移动。如
浏览 0提问于2010-06-26得票数 0
回答已采纳
我希望在一个网站上做一些动画，并希望使用SVG图形。
我听说Raphael是一个帮助渲染图形的很好的库，但我想在我的公司说明为什么我们应该使用它来代替传统的SVG，或者仅仅使用CSS3动画来操作。从这个、这个和中，我收集了一些关于为什么我们应该使用Raphael库而不是传统的SVG或CSS3动画的一些信息：
CSS3：
传统上用于sprite/png动画，在缩放过程中会导致质量损失。
传统的SVG：
无法操作现有的HTML元素
可以用CSS3中的时序函数不可能的线条动画绘制物体
可以在绘制对象之后与其进行交互
SVG元素可以触发事件，并可以用SVG编写脚本。
可
浏览 2提问于2015-06-01得票数 3
1回答
我正在尝试一些基本的svg动画，但我在使用绘制一个简单的多边形时遇到了问题。由于某种原因，我的形状的垂直线没有显示出来。
下面是我的代码：
.path {
fill: red;
stroke: black;
stroke-width: 5px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M160,60 L-160,60 l0,-60 z">
</svg>
下面是我得到的结果：
我在这里做错了什么？提前
浏览 1提问于2017-08-08得票数 1
回答已采纳
1回答
SVG变换圆为简单直线
、、、、
我试图动画一个简单的SVG圆(白色背景或任何其他颜色)，这样当你悬停在它上面时，它变成了一条简单的垂直线(换句话说，它有点平坦成一条线)，然后鼠标出来，然后它又变成一个圆圈。
但是我找不到很多关于如何接近它的信息..。任何帮助都将受到极大的感谢！
浏览 2提问于2015-02-10得票数 0
回答已采纳
我正在尝试在我的屏幕上排列一些项目，如果有一个最透明的指南作为覆盖，那将是很有用的。理想情况下，我会画一条垂直线，在前景中坚持，同时不从下面的窗口窃取焦点。
我已经尝试过在KDE和阿德西亚中内置鼠标标记，但是两者都是自由绘制的，并且不允许创建直线、水平线或垂直线。(Gromit-MPX似乎是一样的。)
使用示例
我已经用igv导航了基因组，有时我需要找出哪些特性是一致的。我希望能够绘制临时垂直线，以查看哪些直线向上，例如在下面的屏幕截图。
📷
浏览 0提问于2014-08-29得票数 6
回答已采纳
4回答
我的问题是，什么是更快的原生SVG动画标签，比如：
<path d="something very long and non-human-friendly">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="360" begin="0s" dur="3s" fill="freeze"
浏览 1提问于2014-08-11得票数 21
1回答
Android手势方向
、、、
我正在开发一款应用程序，它将(希望)利用安卓的手势(如这里所述：)。不过，在我深入研究之前，我想看看手势是否能按照它们被绘制的方向进行考虑。不幸的是，我没有在文档中找到这些信息。
例如，如果用户在我的应用程序上绘制了一条垂直线，我希望手势根据他们是否从屏幕顶部到底部与是否从底部到顶部进行注册。我可以用手势将绘制的方向考虑在内吗？或者一条垂直线就是一条垂直线，不管它是如何绘制的？
谢谢!
浏览 6提问于2010-10-16得票数 1
1回答
<View
android:id="@+id/top_vertical_line"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="@color/white"
/>
给定一个视图，这是一条垂直线，我如何在其
浏览 0提问于2016-02-18得票数 2
1回答
所以我只是进入SVG学习它是如何工作的。目前，我正在创建一个项目，该项目涉及以不同的速度旋转几个SVG <circle>，从而学习animateTransform如何工作。
但是，我发现可以在SVG对象上使用CSS3动画(我更熟悉)。我意识到animateTransform可以做更复杂的动画，但我说的是一个简单的动画，这两个选项都有完成的能力。
与animateTransform**?** 相比，(如果有的话)在SVG对象上使用的(如果有的话)动画有哪些缺点？animateTransform的性能更好吗？
浏览 1提问于2013-12-05得票数 0
我有以下问题：
从左边缘开始绘制1/3处的绿色垂直线，从顶部开始绘制1/3处的水平蓝色线。垂直线应该从图像的顶部延伸到底部；水平线应该从左边缘延伸到右边缘。使用循环并逐个像素绘制线条。
从上到下画一条绿色垂直线，横跨edinburgh-castle.gif副本的1/3；也在同一图像的1/3处画一条水平蓝色线。把副本还回去。
谢谢你们……我真的不知道该怎么做。
浏览 0提问于2015-11-20得票数 0
我想绘制一个通用数据集
plot.data << ::Gnuplot::DataSet.new([x, y]) do |ds|
ds.with = "lines linewidth 2"
ds.notitle
end
然后冻结该区域的自动y-范围，以便在'x1‘位置绘制一条垂直线，从这个y范围的底部到顶部。我设置了一些变量并调用绘图：
a = [x1, x1]
b = [0, y.sort.last * 1.1]
plot.data << ::Gnuplot::DataSet.new([a, b]) do |ds|
ds.with
浏览 0提问于2014-04-28得票数 2
回答已采纳
我想找到在HTML/CSS/Js中绘制任意长度和-width行的最便宜(CPU)的方法。我有一种情况，我的页面除了其他HTML元素外，还会在一个页面上呈现50-200行这样的代码。我遇到的办法是：
SVG。一条是水平线，一条是垂直线。使用Javascript注入并通过参数呈现它们。
画布。一张覆盖整个屏幕的画布，背景透明。
带有border-left/border-top的DIV标记。摘要通过Javascript-方法。
其他建议？哪一个表现最好？这些方法中的任何一种是否存在兼容性问题？
浏览 2提问于2014-04-20得票数 0
回答已采纳
我试图在JavaScript中的GridView前面放一条垂直线来控制间隔，但这条线显示在网格下面。有可能吗？
首先，我想到了单元格边界，但它不起作用。我正在使用svg来划清界限。该表是一个GridView。
这就是我所拥有的：
这就是我想要的：
我想知道是否可以在另一个控件前面绘制一个控件。这条线必须画在客户端(JavaScript)上。
谢谢。
浏览 12提问于2017-06-13得票数 2
回答已采纳
2回答
我们在SVG中有一个带背景的按钮，在Chrome的右边有一条垂直线-但只有在桌面(Chrome版本90.0.4430.93)，而不是Firefox。我在试着去掉垂直线。如何删除垂直线？ 网站为https://en.speedymatch.com/，截图： ? HTML是： <div class="form-group"> <div class=""> <input type="submit"
name="submit"
value="Create an account&#
浏览 81提问于2021-05-09得票数 0
回答已采纳
我使用行渲染器绘制一条线，然后使用开始和结束作为唯一的点。这是一条完美的两点线，然后我在中间加了3点。
我想要制作和动画，我必须移动中点的垂直线。
为了更容易理解，最后，如果我在这个垂直的“轴”上移动点，它将创建一个等腰三角形。
//mid
float x = start.x + (end.x - start.x) / 2;
float y = start.y + (end.y - start.y) / 2;
Vector2 mid = new Vector2(x, y);
浏览 10提问于2022-10-20得票数 0
回答已采纳
1回答
动画SVG中元素重绘的控制
、、、、
我很难弄清楚如何控制通过<object>标记嵌入页面中的SVG中动画元素的重新绘制。
当我使用内联SVG并检查重新绘制(使用Chrome的“显示重绘矩形”)时，我可以看到只有SVG中的动画元素正在重新绘制。但是，当将相同的SVG作为<object>包含时，动画元素似乎会导致整个图像不断地重新绘制。
我尝试过用velocity.js和CSS动画来动画(关键帧+嵌入SVG本身的样式)。对于后者，当我单独查看SVG时，只会重新绘制动画元素，但是当它嵌入到<object>中时，整个元素就会重新绘制。
这似乎效率低下，我想修复它，但我似乎找不到任何信息，为什么会发生这
浏览 7提问于2015-02-02得票数 1
1)我想用"now“值显示一条垂直线
以及
2)在右边添加一点空白--当前“立即”事件被裁剪，因为最后一个(最近的)事件的右侧没有空格。
更新:多亏了评论中的一项建议，这很容易做到：
maxDate.add(1).hour()
在上使用奇妙的数据操作库
例如：电流：
所需：
问题：
如何从svg中检索"now“值的x值，以便绘制线？
我如何在上一次事件之后添加时间间隔(例如1小时)或相对裕度(例如10%)？
浏览 1提问于2018-12-06得票数 0
是否可以对UIView的CoreGraphics内容进行动画处理？
假设我有一个名为MyView的UIView子类，它实现drawRect:方法，如下所示：
- (void) drawRect: (CGRect) rect {
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(c, someColor);
CGContextSetLineWidth(c, someWidth);
CGContextMoveToPoint(c, leftOfMyUIVie
浏览 1提问于2012-01-25得票数 3
1回答
在密度图中寻找边界
、、、、
我对机器学习非常陌生，所以我也愿意接受建议。今天我读了一篇叫做minimax风险的文章，我想知道这在我的情况下是否可行。
我有两个数据集，我感兴趣的是找到一条线(或者更精确地说是一条边界)，这样垂直线右边的左曲线下的面积等于垂直线左边的右曲线下的面积。有没有办法在R中这样做，即找出绘制垂直线的确切位置？
我在这里提供了一些可用于绘制以下图形的示例数据：
浏览 2提问于2013-04-30得票数 1
回答已采纳
我希望由行通道("field": "PLATFORM")、x通道：("field": "estimating-date-time")和y通道("field": "eta-variance")绘制多个时间序列。除了时间序列的线，我想画一条垂直线在x = arrvial-time，这是另一个领域，以“平台”的价值为条件。下面是图表的一个工作示例，但每个图表中所需的垂直线除外：
下面是使用手工说明所希望的效果：
我的问题是如何将每个图表的垂直线添加到规范中？
我面临的挑战是，用于绘制垂直线的字段&#
浏览 7提问于2021-12-17得票数 1
回答已采纳
用边框左和边框右绘制一条垂直线似乎很容易。
但是在我的例子中，我有一个div，我需要在给定的像素上画一条垂直线，比如(240 am )。
我怎样才能做到这一点？
浏览 4提问于2014-01-20得票数 1
回答已采纳
1回答
一些背景:我正在开发一个具有HTML5 5/AngularJS/Bootstrap3表示层的应用程序。该应用程序是一个音乐乐谱查看器和播放器。
分数本身就是一个图像。我已经成功地编写了代码来检测页面上的音乐元素，包括公制元素。或者，简单地说，我知道每个节拍的包围盒的坐标，在每个音乐部分。这些边框基本上是DIVs，然后叠加在分数页图像上。所以，现在，我可以突出一个特定的措施和节奏，因为音乐正在播放。
然而，我想做的是让它成为一个动画插入符。只是一条垂直线，在已知的时间内穿过每个DIV。
所以，总结一下这个问题：
，你有一个DIV。您希望在从左侧开始，以n秒为单位在右侧结束的DIV中绘制一条垂直线
浏览 2提问于2015-03-18得票数 0
回答已采纳
1回答
CSS动画检查
、、、
我想要一个动画的复选标记CSS(用SVG动画动画绘制复选标记)，我试过像下面的代码一样，但是它不是work.what吗？
演示：
CSS：
@import "bourbon";
$color--green: #7ac142;
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke:
浏览 0提问于2016-12-10得票数 26
回答已采纳
我试着在一个UIView中画一条垂直线(称之为视图A)，它基于“视图A”的子视图的中心。
子视图的动画效果很好，但是线条图没有动画效果。它会颠簸到最后的位置。
例如，如果subview为CGPoint(0,100)，而我想要为CGPoint(100,100)设置动画。THe子视图按预期移动，但是线条图形不会移动，它在整个动画过程中仅显示在CGPoint(100,100)处。
当然，在动画块中，我称之为self setNeedsDisplay
我使用的代码如下( pointView是上面提到的子视图)：
CGPointView newCetner = CGPointMake(100,100);
浏览 1提问于2011-12-02得票数 0
1回答
第二y轴和垂直线
、、、
我正在使用以下代码创建小提琴曲：
import seaborn as sns
ax = sns.violinplot(data=df[['SoundProduction','SoundForecast','diff']])
ax.set_ylabel("Sound power level [dB(A)]")
它给了我一个折叠式的结果：
有没有办法在第二个y轴上绘制diff，使所有三个系列都清晰可见？
另外，有没有办法在两个系列之间绘制一条垂直线？在这种情况下，一旦在两个不同的轴上绘制了SoundForecast和dif
浏览 0提问于2018-11-01得票数 1
回答已采纳
我正在显示一个包含两个XYSeries的漂亮图表。每个系列都有24个值，分别绘制在X位置0到23处。一个序列显示了24小时内的温度，另一个序列显示了同一24小时内的降水概率。
当我尝试添加第三个系列来绘制一条垂直线(与OnTouchListener一起用作“光标”)时，问题就出现了。我们的想法是绘制一个两个数据点的系列，它将呈现为一条垂直线，我可以将其用作光标。
我试过这个：
XYSeries cursorLine = new XYSeries("", 2);
cursorLine.add(5, 0);
cursorLine.add(5, 100);
dataset.addSe
浏览 2提问于2013-03-27得票数 1
回答已采纳
我正在尝试使用这里的中的配方绘制一些带阴影的折线图(使用d3.js，但我希望这无关紧要)
我遇到了一些奇怪的问题，如果它是一条垂直线或水平线，应用滤镜就是完全隐藏了这条线。
实际上，这里有3行(除了d之外)具有相同的样式和属性(<path>)。如果我禁用这两行的过滤器，它们将变为可见。
我哪里做错了？我用svg 的简化版本创建了jsfiddle。
浏览 2提问于2019-07-04得票数 0
我有一个svg路径，它的宽度是90vw，它的笔划dasharray是090vw，以产生一个可以沿着一条线动画的点。这在Chrome中是有效的，但是Safari会在整个路径中进行描边。它似乎不喜欢这里的大众单位，尽管它在行程-dashoffset属性中没有问题，而且我在网络上找不到任何提到这一点的地方。在我格式化属性的方式中，有没有什么明显的遗漏？
path#dot {
stroke-width: 32;
stroke-linecap: round;
stroke-dasharray: 0 90vw;
stroke-dashoffset: 45vw;
}
谢谢
浏览 3提问于2018-02-21得票数 1
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
我正在使用，并编写了一些javascript代码，它们已经绘制了我想要的动画。为了简单起见，假设我想使用示例源代码。我正在尝试使用GWT围绕动画构建更丰富的用户界面。例如，如果我在GWT java中设计了一个按钮来打开/关闭粒子动画并触发一个"StopAnimation()“javascript函数，我应该把d3.js库放在哪里，以便正确引用它？
我已经阅读了以下与此主题相关的帖子：
我是GWT的新手，所以我可能遗漏了一些东西，但所有这些示例都谈到了从GWT代码直接接触javascript库或与javascript代码接口。在我的例子中，我唯一需要从GWT接口的javascrip
浏览 3提问于2012-07-29得票数 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
回答已采纳
使用Keith Wood的SVG Jquery插件，有没有办法在不使用动画功能的情况下移动/缩放/旋转路径？我想要一个即时的改变，我猜动画功能有不必要的开销。
我实际做的是创建一条路径，克隆它，然后旋转/移动它，然后重复。(例如，为时钟绘制多个刻度线)。
谢谢
浏览 1提问于2013-03-02得票数 0
1回答
我有一个包含三个变量的数据集。一个连续的自变量，一个连续的因变量，和一个分类如何进行测量的二元变量。使用ggplot，我知道我可以用分类着色的点来绘制散点图：
g <- ggplot(dataset, aes(independent, dependent))
g + geom_point(aes(color=catagory))
然而，我想知道是否有一种方法可以制作一个图，其中有一条垂直线从分类0的点开始，一条垂直线从分类1的点向下。它看起来像这样：
- | | |
| | | |
| | | |
| |
浏览 0提问于2011-01-19得票数 1
回答已采纳
1回答
我有一个用d3绘制的图形，其x和y刻度定义如下：
x = d3.scaleLinear().domain([30, 150]).range([0, width])
y = d3.scaleLinear().domain([0, 100]).range([height, 0])
我需要在25%的数据点之后画一条垂直线。所以我有这样的代码：
svg.append('line')
.attr('x1', lowerLimit)
.attr('y1', 0)
.attr('x2', lowerLimit)
.attr(&#
浏览 4提问于2016-12-13得票数 0
我正在使用Matlab中的y = normpdf(x,mu,sigma);绘制一条法线。这为我画了一条正常的曲线。但是，我需要在曲线上显示额外的信息，比如在曲线上有垂直线来显示µ和sigma。与此类似：
有没有什么Matlab函数可以在曲线上画出这样的垂直线？
谢谢，艾达
浏览 86提问于2016-08-01得票数 1
回答已采纳
我试图创建一个交互式滑块缩放和过滤到一个数据范围使用垂直线从每个数据点选择。我不知道如何在每个数据点上绘制每条垂直线，这样滑块就可以缩放和过滤这个数据范围上的垂直线。目前，我可以在每个数据点和一条垂直线上绘制圆圈(参见附加输出图)，但希望在这些圆圈上绘制垂直线，如果d3有办法这样做，则只想为每个数据点绘制垂直线。我是d3的新手，我将感谢您的反馈！以下是我到目前为止从其他有用的网站学到的东西。
/* implementation heavily influenced by http://bl.ocks.org/1166403 */
// define dimensions of graph
浏览 8提问于2020-10-14得票数 1
回答已采纳
1回答
我在css中有一个扩展的行动画，可以在中看到。
我想要一些帮助，在动画停止时，如何在两端添加一条垂直线。
类似于附件中的图像：
有人能帮我吗？
浏览 8提问于2022-08-19得票数 0
回答已采纳
1回答
下面是我的代码：
<svg height="200" width="500">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
它绘制了以下折线：
然而，我试图实现的(为了随后动画的polyline)是一条带有嵌入bezier曲线的polyline：
这有可能吗？如果
浏览 2提问于2015-12-19得票数 0
回答已采纳
我在qml中放置了一个图表视图。现在我想画一条垂直线，就像图像图像一样：
，当鼠标进入图表区域并返回绘制了所有绘图的垂直线的交叉点时。
浏览 0提问于2021-09-04得票数 0
4回答
我想在点击屏幕的地方画一条垂直线。因为平均手指宽度超过1个像素，所以我想“按步”来做这件事。所以基本上，这条线只能每25px绘制一次。我想找出最近的位置，在那里我可以画一条线。
例如，如果手指点击距离我的上部视图左侧30像素，我希望在视图左侧25像素处绘制一条垂直线。如果点击屏幕距离左侧40个像素，我希望从左侧绘制50个像素的线。(所以每25个像素只能有一条线，我想画最近的一条线。
你知道我该怎么做吗？
划清界限很简单：
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(100.0, 0.0, 1, 320.0)];
lin
浏览 0提问于2012-05-17得票数 4
1回答
我的要求是使用Plotly.js在X轴的某些日期绘制垂直线。我是新来的，巧妙地，我设法找到一个选项，以绘制垂直线使用‘形状’选项。
shapes: [{
type: 'line',
x0: '2000-01-11',
y0: 0,
x1: '2000-01-11',
y1: 7,
line: {
color: 'grey',
width: 1.5,
dash: 'dot'
}
}]
但是我面临的主要困难是在绘制垂直线时如何定义Y轴值，因为Y轴尺度将根据数据的不同而
浏览 3提问于2017-02-23得票数 14
回答已采纳
1回答
我用adobe插画器创建了一个svg，并使用了它生成的代码。我正在尝试动画的svg绘图。我的svg元素：
<svg width="100px" height="100px">
<path fill="none" d="M5,60c0-24.873,20.127-45,45-45" />
<path fill="none" d="M95,60c0-24.873-20.127-45-45-45" />
</svg>
第一条曲线是顺时针方向运
浏览 5提问于2016-09-21得票数 4
如何在ListView中的项目之间绘制一条用点连接的垂直线？ 我正在尝试做的是显示in this picture。我有一个项目的列表，并想向用户显示哪些项目已经预订了通过连接两个点与垂直线。
浏览 99提问于2021-10-10得票数 1
1回答
我试图有一个动画背景与内容，但动画背景不断被取代。唯一的方式动画背景是没有内容，我不能有我的网站。
动画是三条垂直线，间隔均匀。在每一次迭代中，一条垂直线的一部分将变成白色，并下降到垂直线上，对于每一条垂直线。我包括了一张图片来表达我的意思。我如何保持响应性，并能够添加放在动画背景之上的内容(即h1标记和一些导航元素)？还有一种方法可以用css的柔性盒来实现吗？
.lines {
position: absolute;
height: 100%;
margin: auto;
width: 90vw;
}
.line {
position: absolute;
widt
浏览 3提问于2022-09-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
