如何在水平滚动时实现SVG圆的绘制
在水平滚动时实现SVG圆的绘制可以通过以下步骤实现：
- 创建SVG元素：首先，在HTML文档中创建一个SVG元素，可以使用
<svg>标签来创建。设置SVG元素的宽度和高度，以适应所需的绘制区域。 - 绘制圆形：使用SVG的
<circle>元素来绘制圆形。设置圆形的半径、圆心坐标和其他样式属性，如填充颜色、边框颜色等。 - 监听滚动事件：使用JavaScript代码监听水平滚动事件。可以使用
addEventListener函数来绑定滚动事件，并指定相应的处理函数。 - 更新圆形位置：在滚动事件的处理函数中，根据滚动的水平位置，计算圆形的新位置。可以使用SVG的
setAttribute方法来更新圆形的圆心坐标属性。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#scrollable {
width: 100%;
height: 500px;
overflow-x: scroll;
}
</style>
</head>
<body>
<div id="scrollable" onscroll="updateCirclePosition(event)">
<svg id="svg" width="1000" height="200">
<circle id="circle" cx="50" cy="100" r="20" fill="blue" />
</svg>
</div>
<script>
function updateCirclePosition(event) {
var scrollable = event.target;
var scrollLeft = scrollable.scrollLeft;
var circle = document.getElementById("circle");
circle.setAttribute("cx", scrollLeft + 50);
}
</script>
</body>
</html>在上述示例中，我们创建了一个水平滚动的容器#scrollable，其中包含一个SVG元素#svg和一个圆形#circle。通过监听#scrollable的滚动事件，我们在滚动时更新圆形的圆心坐标，使其随着滚动而移动。
请注意，以上示例中没有提及具体的腾讯云产品和链接地址，因为SVG圆的绘制与云计算领域的产品关系不大。如需了解腾讯云的相关产品和服务，请访问腾讯云官方网站。
相关·内容
1回答
我有宽1000px的div，水平滚动和SVG图像。 ? 我在SVG图像中有5个圆圈。如何才能实现每20%的滚动绘制每个圆圈。我的意思是每一个可滚动的div ->画圈里面。JSFiddle 代码： .svg-circles-progress { top: 0;
浏览 21提问于2021-08-19得票数 0
回答已采纳
1回答
当从FireFox中查看SVG文件时，当滚动条出现时，我正试图在用户坐标空间中从Javascript代码中计算正确的鼠标坐标。但这并不完全正确。这是正确绘制基于SVG的工具提示所必需的，即使在水平或垂直滚动SVG时也是如此。
我希望在IE和Firefox浏览器上的坐标转换是正确的。此外，我还希望使用一个不需要特定于浏览器的条件代
浏览 2提问于2010-08-11得票数 2
回答已采纳
在一个HTML页面中，我有三个块:两个文本框和一个内联SVG，其中包含一个圆圈。然后我想在一个文本框中输入圆的半径，在另一个文本框中输入圆的位置(逗号分隔的xy坐标)，然后自动(在带有有效输入的keyup事件中)重画圆)。当然，我的实际目标不是画一个圆圈，而是弄清楚我应该如何在HTML文件中组装HTML + SVG + Javascript，这样事情就开始发生了，我可以在最低限度的工作基础上进行构建
浏览 0提问于2012-09-23得票数 1
回答已采纳
1回答
例如，当我使用SVG.js绘制一个圆时，是否可以覆盖.circle()或.ellipse()函数，以便它像图像一样绘制一条半径线？我想要像SVG.Ellipse = SVG.extend(SVG.Ellipse，{...})这样的东西
浏览 0提问于2017-12-05得票数 0
1回答
我在Raphael Js中工作，用svg创建布局。我已经创建了一些按行和列排列的圆。假设在列中有15个圆圈，在行中有5个圆圈，如附图所示。
我怎样才能做到这一点？
浏览 1提问于2016-04-19得票数 1
6回答
我不知道如何在SVG中绘制一个中空的圆。我想做的方式是有两个圆，一个半径比另一个小。问题是，当我填充它们时，如何让较小的圆圈采用与其所在位置相同的填充颜色？
浏览 11提问于2011-11-19得票数 82
回答已采纳
我想知道是否有可能只从缩放(缩放)功能中排除SVG元素(如圆)，并保留他的平移。例如:在地图中，我用红色实心圆圈指出我当前的位置。当用户缩放时，我希望这个圆有一个恒定的半径。当用户平移时-我希望圆与所有其他视口内容一起平移。我找到了这个解决方案：
我也想知道类似的任务--是否可以拖放一些元素？是否仅指要从pan功能中
浏览 12提问于2017-08-25得票数 0
1回答
是否有一个函数或方法可以裁剪位于viewbox之外的路径，而不只是隐藏它？
我使用的是svg-edit，它有一个viewbox，一个画布区域。画布外部绘制的所有内容都会被隐藏。但是，当收集编辑器的输出并将其粘贴到图形编辑器(如Inkscape )中时，将显示整个绘图。我希望在viewbox之外的绘图完全从编辑器的输出中裁剪。例如，如果我有一个在画布外面的圆，那么编辑器的输出将是半个
浏览 1提问于2013-02-25得票数 4
回答已采纳
我想在WinJS中显示一个ListView，它永远不会显示自己的滚动条。相反，我希望它水平地增长到它的父容器中。我实现它的方式基本上是通过在ListView上设置最小宽度css属性。在初始加载时，这可以完美地工作。当额外的数据加载到支持数据源(在本例中是WinJS.Binding.List )时，我希望ListView绘制元素并调整自身的大小。相反，ListView绘制元素并添加自
浏览 2提问于2012-11-21得票数 0
回答已采纳
目前，我已经使用svg.js库实现了一个svg。圆圈"draw_face“被绘制在画布id上，它是一个SVG而不是div。通过调用.draggable()，可以将形状拖动到“画布”上的任何位置。不过，我也想把它拖到“保存”目录中，这样我就可以将该目录中的所有svg元素保存为.xml或.svg文件。通过添加ForeignObject，圆将位于div的顶部，但是div不会识别圆</em
浏览 0提问于2018-04-06得票数 1
1回答
我使用svg在Bezier二次路径的帮助下，在两个圆之间绘制了几个圆弧。这是我想要达到的最终效果。
我已经对如何在两个圆之间画几个圆弧(没有箭头)有了一些想法。但是当我试图在两个圆之间画几个圆弧(末端有箭头)时，发生了一些奇怪的事情。我在这里使用，并将refX设置为圆的“半径”，以偏移圆内的直线。但我很快意识到，简单地使用refX并不能解决问题，
浏览 3提问于2018-10-18得票数 0
当我在Illustrator中创建SVG时，通过在不同层上绘制多个行程路径，从路径开始到路径末尾没有连接，并且没有应用填充，然后将它们连接到一个单层中，SVG在浏览器中按预期呈现，但在Three.JS中不像预期的那样呈现我是逐字使用在ThreeJS网站上定义的“加载”代码：，只更改正在使用的SVG文件的路径。当我使用维基媒体中的SVG文件样本时，这些文件中有空洞化的</em
浏览 1提问于2019-06-05得票数 0
回答已采纳
如何在水平滚动视图中滚动时增加中心项目的大小？从服务器动态获取图像，当用户滚动时，中心项目大小增加
无法实现上述目标。使用其他视图而不是水平滚动视图来实现此功能的任何提示。
浏览 8提问于2017-03-08得票数 0
我有很多对象使用相同的svg路径，这基本上是一个箭头。我想在另一个圆形的svg路径上定位对象，这样箭头看起来就像在向外“辐射”。我读了几篇文章，其中说使用<object>对svg提供更多的控制，但我找不到如何将<object>定位到另一个svg <object>路径(循环)。我想让他们从滚动的中心移出一点，我想用路径来制作动画会更容易，而不是手动绘制每个箭头的动画
浏览 5提问于2014-03-06得票数 1
回答已采纳
1回答
我有一个用D3创建的数据图表，其中我为每个数据点画了一个圆。 当圆重叠时，我希望将它们渲染得稍微大一些，这样当几个数据点堆积在同一位置时，您就可以看到不同之处。我发现我可以使用dilate应用feMorphology过滤器，但我需要能够以某种方式缩放扩张，这取决于相同位置上的圆的数量。下面是SVG演示： <svg width="400" height="120" xm
浏览 19提问于2020-03-27得票数 1
回答已采纳
1回答
我需要创造不同的背景为4个季节与海斯托克插件。我设法展示了不同颜色的乐队，以显示季节的开始和结束。然后我偶然发现了这个插件：，但是我只能设置循环模式来填充这个带。或者，如果CSS“不重复”之类的东西对于SVG模式是可以实现的，那么这也是可以修复的。
我如何在乐队中间设置一个图像，使其成为一个良好的居中背景？我首先尝试了标记，但这会影响X轴标签。如果没有addBand特性，我认为用高图表图像渲染器绘制
浏览 4提问于2015-05-08得票数 0
回答已采纳
3回答
PDF包含建筑物的蓝图。我使用iText Java库实现了这一点。现在，我想在浏览器中查看时编辑PDF。(编辑-在PDF中绘制/删除圆、线)。我需要保存编辑的PDF到服务器也。我搜索了一下，都在说使用iText的交互式表单字段的示例。上面的场景在iText中是可能的吗?或者请推荐一些库来实现这个特性。编辑：
据我所知，PDFTron库允许在iOS/Android平台上绘制
浏览 5提问于2015-03-23得票数 2
1回答
我有一个像这样的scroll__cotainer div： <div onClick={setBlackThemeclassName="skin__option"> </div>但是，当我将以下css应用于容器时
浏览 2提问于2020-11-17得票数 0
回答已采纳
2回答
我正在实现一种几何缩放行为，如本所示问题是，如果光标位于绿色覆盖线或任何其他SVG元素(行、圆等)外面的白点上。鼠标轮事件被浏览器拦截并向下滚动。我希望能够自由缩放，独立于我在视觉上的位置。 return [ randomY()});
var svg= d3.s
浏览 2提问于2014-01-07得票数 0
回答已采纳
我现在正在学习JS动画方法，我已经编写了这段小代码，它使用GSAP库中的TimelineLite()和staggerTo()依次绘制和填充SVG路径。tl.staggerTo(paths, 0.5, {strokeDashoffset:"0"}, 0.3).staggerTo(paths, 0.5, {fill:"#000"}, 0.2);
现在，我要解决的问题是如何在向下滚动窗口时绘制SVG</em
浏览 5提问于2014-03-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
