- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 3 个 svg donut chart 表,每个图表都有一条用 stroke-dasharray 创建的线,所有图表加起来为 100%。
我希望每个图表都从最后一个图表结束的地方开始,所以第一个图表是从 0-60%。我希望第二张图表从 60% 开始到 90%,最后一张图表从 90% 到 100%
我正在尝试使用 stroke dashoffset 来实现这一点,但我不知道它是如何工作的。
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25"></circle>
</svg>
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="red"
stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="60"></circle>
</svg>
<svg width="15%" height="15%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="grey"
stroke-width="3"
stroke-dasharray="10 90"
stroke-dashoffset="-"></circle>
</svg>
最佳答案
半径为 r ="15.91
的圆周等于2 * 3.1415 * 15.91 = 99.96
∼ 100
stroke-dasharray="60 40"
,其中
60
- 破折号
40
- 差距
正值 stroke-dashoffset = 25
将线逆时针移动四分之一圆。
由于默认 - stroke-dashoffset = 0
圆将从 90 度开始,即从第一象限的 x
轴开始
<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- first chart is from 0-60% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25">
</circle>
stroke-dashoffset = -35
移动第二个,红色顺时针转圈到第一条绿线的尽头(25-60 = -35)
<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- first chart is from 0-60% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25"></circle>
<!-- second chart to start at 60% and go to 90% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="red"
stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="-35"></circle>
</svg>
stroke-dashoffset = -65
移动第三个,橙色顺时针转圈到第二条红线的尽头(-35-30 = -65)
<svg width="50%" height="50%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<!-- first chart is from 0-60% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="green"
stroke-width="3"
stroke-dasharray="60 40"
stroke-dashoffset="25"></circle>
<!-- second chart to start at 60% and go to 90% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="red"
stroke-width="3"
stroke-dasharray="30 70"
stroke-dashoffset="-35"></circle>
<!-- final chart to start at 90% to 100% -->
<circle class="donut-segment"
cx="21"
cy="21"
r="15.91549430918954"
fill="transparent"
stroke="orange"
stroke-width="3"
stroke-dasharray="10 90"
stroke-dashoffset="-65"></circle>
</svg>
关于svg - stroke-dashoffset,位置stroke-dasharray,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52701491/
我有一些动画 svg 插图,当用户滚动到它们时,它们会在视口(viewport)的宽度上绘制。 它们在常规屏幕尺寸下工作得很好,但是,我的同事 2560x1440 显示器没有以正确的长度显示 SVG
我想我不太明白这里的某些东西。stroke-dasharray 中的百分比单位与什么有关?我在考虑相对于 SVG View 框的问题,但我可能错了。 我的问题:我有一个 SVG,宽度为 320px,高
我正在研究 SVG 仪表,我想在范围 slider 移动到带有渐变颜色的事件笔触填充时将半圆分成几部分。并且想在计针移动时再增加一条黑色运行轨迹。我曾尝试使用 stroke-dasharray 但添加
我有 3 个 svg donut chart 表,每个图表都有一条用 stroke-dasharray 创建的线,所有图表加起来为 100%。 我希望每个图表都从最后一个图表结束的地方开始,所以第一个
我有 3 个 svg donut chart 表,每个图表都有一条用 stroke-dasharray 创建的线,所有图表加起来为 100%。 我希望每个图表都从最后一个图表结束的地方开始,所以第一个
我有一条由用户使用 D3.js 绘制的路径。 我想在我的用户绘制路径上定义一个破折号数组,但是,随着它改变其形状和长度,破折号的行为不一致并且间隙在移动并变得越来越小。 这是一个代码笔: https:
我是 SVG 和动画方面的新手。我在网上看了一些教程,想实现一个“绘图”图标效果,以便有一个加载图像: https://www.cassie.codes/posts/creating-my-logo-
我正在尝试创建一个具有 16 像素路径和 14 像素间隙的虚线图案。我试过使用: stroke-dasharray: 16px 14px; 适用于我的 元素,但似乎对我的 没有任何作用元素。 这里有
我有一系列圆圈,其边框由较小的圆圈组成,我称之为“点”。然后我通过使用 CSS3 的 transform 旋转它们来为圆圈设置动画,每个圆圈比最后一个多 5 或 15 度(交替),中间的圆圈根本不旋转
打印线与 stroke-dasharray PDF 创建不同的行为,请 看 image这里。 图A ,我直接从浏览器(Chrome)截取的屏幕截图。 图B 是来自同一页面的打印 PDF。 请注意图片
我想为 SVG stroke-dasharray 的各个破折号的旋转设置动画,有人知道怎么做吗? 我意识到我可以使用 CSS 的 transform:rotate() 旋转 SVG 元素的整个对象,但
我正在尝试在 D3 中制作路径线动画。我可以让其他过渡起作用,例如淡入淡出效果,但在研究如何过渡路径之后,似乎最好的选择是通过修改它来使用笔画 dasharray var data = { "ty
如何在 Android Vector Drawable 上添加虚线? Android Vector 似乎不支持来自 svg 的“stroke-dasharray”。还有其他方法吗?我想要虚线的可绘制对
我创建了一个 SVG 动画,我允许 stroke-dasharray 在其中移动。我是否可以在 stroke-dasharray 的尾部添加渐变并保持一侧透明,如您在示例中看到的那样? .svg-ma
我正在尝试使用半径(rx,ry)在 svg 中创建一个矩形,在顶部和底部带有边框/笔触,并带有圆角。 通过使用 css 属性“dasharray: width, height”,可以仅使用边框/笔触设
我尝试使用以下代码更改 line-dasharray 设置, 'line-dasharray': [ "case", ['==', ['get', "user_class_id"],
希望为下面的 SVG 制作动画,我最初已经开始工作了。但是,我希望它用我定义的点在相反的方向上“绘制”第二个 SVG。 有什么办法可以做到这一点吗?用点从左到右有效地绘制我的形状。 代码笔:http:
在 D3 v4 中,我发现将 stroke-dasharray 指定为属性可以按预期工作。另一方面,通过样式指定它则不会。请参阅本说明末尾的代码 list 。 根据 Mozilla 基金会 (http
我正在为属于箭头图标的一些笔画制作动画,这在所有浏览器(包括 IE11)中都很好用,Safari 除外。出于某种原因,当 stroke 破折号在 stroke-dasharray 规则中设置为 0 时
我将此图表与 Angular 6 一起使用,我在此图表上遇到了一些冲突,我尝试绑定(bind)数据,但我不能这样做,它无法正常工作, 这个 stroke-dasharray="5, 100" 我替换了
我是一名优秀的程序员,十分优秀!