个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在 D3 v4 中，我发现将 stroke-dasharray 指定为属性可以按预期工作。另一方面，通过样式指定它则不会。请参阅本说明末尾的代码 list 。
根据 Mozilla 基金会 (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes):
"使用 CSS
除了设置对象的属性外，您还可以使用 CSS 设置填充和描边的样式。并非所有属性都可以通过 CSS 设置。处理绘画和填充的属性通常可用，因此 fill、stroke、stroke-dasharray 等...都可以这样设置..."
所以有以下三种可能性之一:
1) 我没有在下面提供的示例代码中正确实现样式。
2) D3 没有正确实现样式。
3) Mozilla 基金会关于能够通过 CSS 设置 stroke-dasharray 的说法是错误的。
这是什么？
代码:
<!DOCTYPE html>
<html>
<head>
<script src='https://d3js.org/d3.v4.min.js'></script>
<style>
.dashed {
stroke-dasharray: '5,3';
}
</style>
</head>
<body>
<svg height=200 width=500></svg>
</body>
<script>
var svg = d3.select('svg');
svg.append('line')
.attr('x1', 0)
.attr('x2', 500)
.attr('y1', 25)
.attr('y2', 25)
.style('stroke', 'blue')
.style('stroke-width', '2px')
.style('stroke-dasharray', '5,3');
svg.append('line')
.attr('x1', 0)
.attr('x2', 500)
.attr('y1', 75)
.attr('y2', 75)
.style('stroke', 'blue')
.style('stroke-width', '2px')
.attr('class', 'dashed');
</script>
</html>
最佳答案
您在 CSS 中使用的字符串是无效的属性值。取而代之的是，它应该是一个数字:
.dashed {
stroke-dasharray: 5,3;
}
检查一下:
<html>
<head>
<script src='https://d3js.org/d3.v4.min.js'></script>
<style>
.dashed {
stroke-dasharray: 5,3;
}
</style>
</head>
<body>
<svg height=200 width=500></svg>
</body>
<script>
var svg = d3.select('svg');
svg.append('line')
.attr('x1', 0)
.attr('x2', 500)
.attr('y1', 25)
.attr('y2', 25)
.style('stroke', 'blue')
.style('stroke-width', '2px')
.style('stroke-dasharray', '5,3');
svg.append('line')
.attr('x1', 0)
.attr('x2', 500)
.attr('y1', 75)
.attr('y2', 75)
.style('stroke', 'blue')
.style('stroke-width', '2px')
.attr('class', 'dashed');
</script>
</html>因此，正确答案是数字 1:
1) I am not implementing the style properly in the sample code provided below.
关于css - D3 通过 CSS 设置 stroke-dasharray，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40743077/
25
4
0
我有一些动画 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" 我替换了
我是一名优秀的程序员,十分优秀！