svg为什么dasharray不能按预期工作
SVG是可缩放矢量图形（Scalable Vector Graphics）的缩写，是一种用于描述二维图形和图像的XML标记语言。在SVG中，dasharray是一个属性，用于定义虚线的样式。它指定了虚线中实线和空白之间的长度。
然而，有时候在使用SVG时，dasharray属性可能无法按预期工作。这可能是由于以下几个原因：
- 元素类型不支持dasharray属性：并非所有的SVG元素都支持dasharray属性。只有那些基于路径的元素，如<path>、<line>、<polyline>、<polygon>等才能使用dasharray属性来定义虚线样式。
- 属性值设置错误：dasharray属性的值应该是由一系列数字组成的字符串，用逗号分隔。每个数字表示实线和空白之间的长度。例如，dasharray="5,2,2,2"表示实线长度为5个单位，空白长度为2个单位，以此类推。如果属性值设置错误，虚线样式可能无法正确显示。
- 元素尺寸太小：如果SVG元素的尺寸非常小，虚线的实线部分可能会被压缩成看不见的长度，导致无法按预期工作。在这种情况下，可以尝试增大元素的尺寸或调整dasharray属性的值。
- 浏览器兼容性问题：不同的浏览器对SVG的支持程度和实现方式可能有所不同，这可能导致dasharray属性在某些浏览器中无法按预期工作。在开发过程中，可以使用浏览器兼容性测试工具来检查不同浏览器对dasharray属性的支持情况。
总结起来，当dasharray属性无法按预期工作时，可能是由于元素类型不支持、属性值设置错误、元素尺寸太小或浏览器兼容性问题所导致。在使用SVG时，建议仔细检查这些因素，以确保dasharray属性能够正确地定义虚线样式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云SVG图像处理服务：https://cloud.tencent.com/product/sif
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
1回答
svg为什么dasharray不能按预期工作
html、css、svg
我是SVG和动画方面的新手。我在网上读了一些教程，我想实现一个“绘图”图标的效果，以便有一个加载图像：SVG是从Avocode (由我的设计器设计)生成的。<svg xmlns="http://www.w3.org/2000/svg">
<path class="test2&qu
浏览 8提问于2019-11-21得票数 1
回答已采纳
1回答
如何在矩形的上、下、左、右1或2边添加边框
javascript、css、svg
我在javascript和CSS方面不是新手，但我也不太熟悉SVG。我想知道你能不能把边框加到一个矩形的一侧。只是底部还是左边。fdtResizable" fdtfont-size="12" fdtRows="4">
<rect id="fdtElem303" fill="#ffffff" stroke="#000000" stroke-dasharrayfdtActualY="967"
浏览 1提问于2015-09-07得票数 2
1回答
文本锚=“开始”，不将文本元素移动到svg元素的开头。
html、css、svg
我有以下非常简单的SVG代码 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class<circle cx="100" cy="100" r="57" class="border" fill="#eee&quo
浏览 4提问于2016-04-03得票数 1
回答已采纳
1回答
svg笔划-dasharray不工作
javascript、html、css、svg
我刚开始使用SVG，我被困在了中风-dasharray部分。我找了很多，但还是找不到解决问题的办法。我想我漏掉了什么。即使在使用笔划dasharray之后，文本也不是虚线。#namelogo{ height: auto;#namelogo path:nth-child(1){}<svg id="namelogo&qu
浏览 1提问于2021-05-19得票数 0
1回答
为什么这个SVG径向进度(循环百分比)不能工作？
javascript、html、css、svg
以下是我们为每个SVG所采取的步骤：
circle class="percentage" fill="none" cx="75" cy="75"
浏览 1提问于2018-02-13得票数 1
1回答
选中和取消选中时的自定义复选框动画: CSS
css、svg
当复选框被选中时，svg动画完全没有问题。但是当我取消选中复选框时，就没有动画了。如何通过从默认到选中使用相同的动画，在取消选中复选框的同时制作反转动画。请帮帮忙。0 auto; transform: translate3d(0, 0, 0);.check svgpath { stroke-dashoffset: 0;.check svg polylin
浏览 18提问于2020-05-22得票数 0
回答已采纳
1回答
SVG圆圈笔画有奇怪的结尾吗？如何均匀地展开笔划？
html、css、svg
我看着这个 https://css-tricks.com/almanac/properties/s/stroke-dasharray/ 然后我看着这个 https://codepen.io/team/css-tricks/pen/LGLzWq 我特别关注代码中的stroke-dasharray，我不确定发生了什么，但我认为它是笔划的结束，不确定如何正确地获取它。但基本上这个image with circles 为什么</e
浏览 8提问于2019-10-18得票数 1
回答已采纳
1回答
为什么下面的动画不能像预期的那样在不同的妓院中工作
javascript、html、css、animation、svg
我有下面的svg动画，但是他们在safari和chrome上处理的完全不同。}
to { fill: black;}
stroke-dasharray: 1000; animation: draw 5s forwards;} <text而且，safari上的fi
浏览 1提问于2022-04-25得票数 3
4回答
SVG动画的改变方向
css、svg
HTML是<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"
浏览 7提问于2015-03-29得票数 9
回答已采纳
3回答
如何在IMagick中使用SVG CSS样式？
php、css、svg、imagemagick、imagick
似乎(PHP) Imagick不接受CSS的样式，即使<style>在SVG的<def>中。对吗？我找不到这方面的参考资料。.some-class {}
然后将class="some-class"替换为stroke-dasharray="5 5"，或者替换为style="stroke-dasharray: 5
浏览 0提问于2018-03-28得票数 1
1回答
制作SVG线条动画
css、svg、animate.css、svg-animate
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svgversion="1.1" id="Layer_1" xmlns="http
浏览 13提问于2019-06-30得票数 0
1回答
SCSS中的圆图
html、css、math、sass、frontend
问题是，当中间图表(.circle2)的值半径为50时，它可以正常工作，但是当动画开始时为40时，奇怪的拖尾动画开始了，你知道为什么吗？我想这是一道数学题。
} 0% { }
浏览 12提问于2021-02-23得票数 1
回答已采纳
2回答
不使用CSS或JS创建SVG饼图的数学方法
html、math、svg、charts、geometry
我正在寻求在纯SVG中创建一个饼图。我不想使用JS或CSS，这是本网站上的大多数解决方案。我偶然看到了一篇很棒的文章，它解释了如何在纯SVG：中创建饼图。<svg xmlns="http://www.w3.org/2000/svg" height="100%transparent"/>
浏览 2提问于2020-01-26得票数 3
回答已采纳
1回答
如何从SVG中动画虚线(使用HTML、CSS和/或JavaScript)
javascript、css、svg
我需要做好这段代码所做的工作：<svg width="1400px" height="892px" viewBox="0 0 1400 892" version="1.1" xmlns="http://www.w3="1" fill="none" fill-rule="eveno
浏览 0提问于2019-08-20得票数 0
2回答
如何在IE中显示SVG甜甜圈图？
html、css、internet-explorer、svg
div class="centered"> <div class="graphicsContent">51%</div>
浏览 1提问于2016-04-11得票数 2
回答已采纳
1回答
将更多部分添加到页面后，CSS动画速度减慢/无法完成
html、css、webflow
现在，在网站上工作并添加了更多的部分后，动画速度很慢，有些还没有完成。 以下是我正在使用的嵌入式代码，如果有人能告诉我为什么会发生这种情况，我将非常感激:) 我猜代码的目标是身体？这就是为什么当添加更多的部分时，动画会变得混乱？<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="height:64px;w
浏览 11提问于2020-11-29得票数 2
回答已采纳
2回答
为什么这些行不在它们的svg元素中？
html、css、svg
我对svg相当陌生，我可能需要一些帮助，弄清楚为什么我的台词没有像预期的那样出现。我使用红色表示我的第一行位置，使用蓝色表示svg元素所在的位置--模仿在developer工具中鼠标对元素时看到的内容。我希望行位于svg元素中的某个位置。相反，它显然不是，而且是无形的。第二行是部分可见的，但不是我想要的地方(在下一行的另一行svg中，“支付者持续时间”类似于另一行，居中很好等等)。
class="legendKey"><line y1="
浏览 3提问于2015-03-11得票数 1
回答已采纳
2回答
带有<style>标签的SVG动画问题
html、css、svg
我试图在HTML中添加CSS代码，但是我很难让SVG动画工作。我在这里做错什么了？我的客人是，我指错了<style>，但经过几次尝试，我无法使它工作。transform: rotate(360deg); }
0% { stroke-dashoffset: 0; 50% {
浏览 2提问于2017-03-14得票数 2
回答已采纳
2回答
SVG视图框中的文本字段不旋转
css、svg、text、css-transforms
{ stroke:#eaeaea; stroke-dasharray{ stroke:#f73319; stroke-dasharray:75.39 100.53;}<body>
<svg viewBox=
浏览 2提问于2016-06-29得票数 0
回答已采纳
1回答
如何在笔画线和笔画偏移圆svg上实现动画？
html、css、svg
我试着用笔画线做分段，但是不是工作。想法是零碎将动画从0到50行。 stroke-dasharray: 50 100; fill: none; stroke-width0.3s; @keyframes progress { stroke-dasharray: 0 100;
stroke-
浏览 2提问于2022-06-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
