问题标签 [stroke-dasharray]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svg - 每个圆圈的破折号数相同 - SVG
首先让我说我的最终目标类似于下图。它在每个环中有 36 个圆圈,它们之间的间距使得每个点都位于其内部圆圈中两个点之间的中间
我发现我可以使用stroke-dasharray
非常小的长度(.001
在我的情况下)并stroke-linecap="round"
制作边框圆点。我现在设置它的方式每个都比上circle
一个大 5 并且为. 这是我的 jsFiddle。目前我最内圈只有21个点,我最外圈有29个点radius
percentage
stroke-dasharray
如何在每个圆圈中获得相同数量的点?是否有数学方法可以做到这一点或我不知道的属性?可以做些什么来均匀地使用整个圆周来均匀地隔开圆圈(而不是在我认为的 x 轴的右侧有一些)?
在我看来,我必须简单地猜测并检查这些值才能以我想要的方式得到它,但我很想被证明是错误的。stroke-dasharray
Mozilla 和 W3C上的文档不是很有用
css - SVG stroke-dasharray 偏移不一致
我有一系列带有边界的圆圈,这些圆圈由较小的圆圈组成,我称之为“点”。然后,我通过使用 CSS3 旋转圆圈来为圆圈设置动画transform
,每个圆圈都比上一个圆圈多 5 或 15 度(交替),中间圆圈根本不旋转。这种度数的交替是由于其中一半的原始偏移量5deg
动画本身效果很好,但是圆圈中每个点之间的偏移量并不一致。当动画完成时,这一点很明显,一些点会跳回来。如果它们都偏离了一致的数量,那么这将是我的计算中的错误,但是同一个圆圈周围的点会跳跃不同的数量,这意味着它们从一开始就偏移了不同的数量。Vals 在他回答结尾的示例中也显示了这种偏移量的不一致
这是每个圈子的设置方式。每个点之间的间距是通过使用公式确定的spacing = (radius × 2) × 3.14159265 ÷ numberOfCircles
。这.001
是为了让 Chrome 看到这些点
谁能帮我修复这个 SVG 渲染偏移错误?
编辑
vals 和 squeamish ossifrage 都为这个问题提供了非常有效的替代解决方案。但是,如果可能的话,我仍然希望实际解决偏移/渲染问题
javascript - SVG 路径 stroke-dasharray 过渡在某些浏览器中向后工作 -d3js
我正在使用 D3js,并且绘制了一个像这样工作的图表(编辑:使用 JSON 数据的新小提琴)
我实际上正在为我的数据使用外部 JSON 文件。
我的问题是,当我在另一个具有不同分辨率的系统中打开文件时,我正在绘制的线向后工作。我认为问题是由于不同的分辨率或可能是因为其他原因。有人可以帮我解决这个问题。
提前致谢...
silverlight - Silverlight 1px 虚线,无抗锯齿
我想要实现的是从其父级的一个边缘绘制一条虚线到另一个边缘。与此类似的东西:
问题是,上述内容似乎只在设计时起作用。
问题 #2 是即使我成功绘制了类似的东西,它也会被抗锯齿破坏。我知道 SL 没有 SnapsToDevicePixels 选项,但 UseLayoutRounding 和PixelSnapper都无法阻止我的 1px 虚线在某些情况下分布在 2 条像素线上。
html - 如何更改 SVG 图像中 stroke-dasharray 的“起点”?
我想为自定义徽标制作动画,例如典型的进度圈(例如百分比)。因此,我创建了一个带有笔划的圆圈,并为 svg 徽标设置了一个剪辑路径。
我快完成了,但我需要将笔画动画的起点从左侧(参见代码)更改为顶部 - 或箭头旁边。这样进度就从箭头之一开始。stroke-dasharray 和 stroke-dashoffset 的不同值将不起作用。
这是我当前的代码:http: //jsfiddle.net/w5huatyf/
谢谢你的帮助!
svg - topojson.mesh 输出不正确的路径?(笔划破折号)
我通过以下方式预测国家边界:
一些边界svg线无缘无故地连接到其他边界:
放大时:
注意:海岸线和封闭的多边形都不会被弄乱。npm topojson
我通过& natural earth shapefiles生成了这些数据。在黄色印度(巴基斯坦、尼泊尔、柬埔寨边界)周围似乎也缺少二分之一的国际边界。
什么是窃听?我该如何解决?
Demo , #Mesh , 可能与:D3js SVG open lines display a fill artifact, 如何修复它?& “中风破折号数组:x,y;” 搞乱svg路径?(铬)。
jquery - SVG 和 VelocityJS 动画问题
出于某种原因,我下面代码中的 svg 动画无法正确完成。我正在制作动画,stroke-dashoffset
但是当动画完成时,外圈仍然缺少一块。尽管我将stroke-dashoffset
返回值设置为零,但它似乎仍在完成动画设置。
>
css - 使用 stroke-dasharray 在 Safari 中渲染 SVG
我在 Safari 中遇到了一个奇怪的 SVG 渲染问题。我有一个像圆形加载器一样带有笔画动画的圆圈,但是由于某种原因,一旦我添加了stroke-dashoffset或stroke-dasharray,渲染就关闭了。
gif供参考:
(来源:askenielsen.dk)
一旦应用了其中一种样式,渲染似乎会变得更加锯齿状。
它看起来并不多,但不止一个圆圈,它变得非常明显:
(来源:askenielsen.dk)
在视网膜显示器上的 Safari 或在 IE、Firefox、Chrome 等中看起来不错。
在这两种浏览器中,圆圈的缩放或笔划宽度都不会改变问题。
SVG
CSS
你可以在这里测试它。
有任何想法吗?