- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
如果我有一个由 51 个点组成的路径,我想将它分成 5 个相等的长度(即每个 11/10 段),并为每个长度涂上不同的颜色,这是否可以使用 CSS 或其他一些属性?
路径将使用 d3 进行动画处理,因此我尽量避免创建多个“子”路径来构成整个元素路径。
路径如下:
<path d="M110,20L110.88577904706136,20.047209998248857C111.77155809412275,20.094419996497713,113.5431161882455,20.18883999299543,115.30463805182572,20.377145077846542C117.06615991540592,20.56545016269765,118.81764554844356,20.84764033590216,120.54917243489842,21.222116933750126C122.28069932135328,21.59659353159809,123.99226746122535,22.063356554089513,125.67418047904829,22.61976169544746C127.35609349687124,23.176166836805404,129.00835139264507,23.82221409702987,130.62159379528583,24.554243489317997C132.2348361979266,25.286272881606124,133.8090631074343,26.10428440595791,135.33535621385198,27.003643863657487C136.8616493202697,27.90300332135707,138.34000862359738,28.883710712404444,139.7620589230205,29.94021013349393C141.18410922244365,30.996709554583422,142.54985051796223,32.129001005715025,143.85154561227586,33.33066982959774C145.1532407065895,34.532338653480444,146.3908895996982,35.803384850114256,147.5574807633528,37.13660768885309C148.7240719270074,38.469830527591924,149.81960536120792,39.86523000843579,150.83787465017312,41.314900914539024C151.8561439391383,42.76457182064226,152.79714908286817,44.268514152004876,153.65555909922023,45.81820777484727C154.51396911557225,47.36790139768965,155.28978400454645,48.9633463120118,155.9786086197968,50.59550400362038C156.66743323504718,52.22766169522895,157.26926757657372,53.89653216412395,157.78070213259127,55.59266092567566C158.29213668860885,57.288789687227386,158.71317145911743,59.01217674143583,159.04142119802364,60.75305875632364C159.36967093692985,62.49394077121146,159.60513564423366,64.25231774677866,159.74648136532477,66.01822812615272C159.88782708641588,67.7841385055268,159.93505382129425,69.55758228870776,159.8878940210714,71.32851256234781C159.84073422084853,73.09944283598784,159.69918788552445,74.86785960008696,159.46405690336826,76.6237444203648C159.22892592121207,78.37962924064263,158.9002102922238,80.12298211709918,158.47977225611567,81.84392660738509C158.05933422000754,83.56487109767099,157.5471737767796,85.26340720178625,156.9461924176672,86.92991237335076C156.34521105855475,88.59641754491525,155.65540878355785,90.23089178392901,154.88069346037983,91.82407546727661C154.10597813720182,93.4172591506242,153.2463497658427,94.96915227830567,152.3066783127712,96.47096306570013C151.36700685969973,97.97277385309461,150.3472923249159,99.42450230020211,149.25331159498796,100.81792407532912C148.15933086505999,102.21134585045613,146.99108393998787,103.54646095360268,145.75518917200603,104.81570569096695C144.51929440402418,106.08495042833124,143.2157517931326,107.28832479991325,141.85194616865658,108.41901144947602C140.48814054418057,109.54969809903876,139.06407190612012,110.60769702658224,137.5878078878243,111.58701445680447C136.11154386952853,112.56633188702668,134.5830844709974,113.46696781992763,133.0110887200943,114.28381997300949C131.43909296919122,115.10067212609135,129.82356086591614,115.83374049935414,128.17364472240112,116.47887211400366C126.52372857888608,117.12400372865321,124.83942839513108,117.6811985846895,123.13028606818317,118.1473000619312C121.42114374123526,118.61340153917293,119.68715927109443,118.98840963762007,117.93815602621656,119.27019986147212C116.1891527813387,119.55199008532418,114.4251307617238,119.74056243458114,112.65608350454673,119.83484860920962C110.88703624736964,119.9291347838381,109.11296375263035,119.9291347838381,107.34391649545327,119.83484860920962C105.57486923827618,119.74056243458114,103.8108472186613,119.55199008532418,102.06184397378343,119.27019986147212C100.31284072890558,118.98840963762008,98.57885625876476,118.61340153917294,96.86971393181685,118.14730006193122C95.16057160486892,117.6811985846895,93.4762714211139,117.12400372865321,91.82635527759886,116.47887211400368C90.17643913408384,115.83374049935414,88.56090703080876,115.10067212609135,86.98891127990566,114.2838199730095C85.41691552900258,113.46696781992765,83.88845613047147,112.5663318870267,82.41219211217569,111.5870144568045C80.9359280938799,110.60769702658229,79.51185945581945,109.54969809903879,78.14805383134343,108.41901144947605C76.7842482068674,107.28832479991328,75.48070559597582,106.08495042833127,74.24481082799397,104.81570569096698C73.00891606001211,103.54646095360269,71.84066913493999,102.21134585045614,70.74668840501202,100.81792407532913C69.65270767508406,99.42450230020211,68.63299314030026,97.97277385309462,67.69332168722879,96.47096306570015C66.7536502341573,94.96915227830569,65.89402186279817,93.41725915062423,65.11930653962015,91.82407546727663C64.34459121644213,90.23089178392902,63.65478894144523,88.59641754491528,63.053807582332816,86.92991237335077C62.4528262232204,85.26340720178626,61.94066577999245,83.564871097671,61.520227743884334,81.8439266073851C61.09978970777622,80.1229821170992,60.77107407878793,78.37962924064266,60.53594309663174,76.62374442036483C60.30081211447555,74.867859600087,60.15926577915146,73.09944283598787,60.112105978928604,71.32851256234784C60.06494617870574,69.55758228870779,60.11217291358412,67.78413850552684,60.25351863467521,66.01822812615276C60.3948643557663,64.25231774677869,60.63032906307012,62.4939407712115,60.95857880197633,60.75305875632367C61.28682854088254,59.01217674143585,61.70786331139114,57.28878968722739,62.2192978674087,55.592660925675666C62.73073242342626,53.896532164123954,63.3325667649528,52.227661695228974,64.02139138020317,50.5955040036204C64.71021599545352,48.963346312011836,65.48603088442772,47.36790139768968,66.34444090077976,45.81820777484728C67.2028509171318,44.2685141520049,68.14385606086168,42.764571820642274,69.16212534982687,41.31490091453903C70.18039463879205,39.865230008435795,71.27592807299254,38.469830527591945,72.44251923664716,37.13660768885311C73.60911040030176,35.80338485011427,74.84675929341047,34.53233865348045,76.14845438772412,33.33066982959774C77.45014948203777,32.129001005715025,78.81589077755635,30.996709554583422,80.23794107697947,29.940210133493935C81.6599913764026,28.88371071240445,83.13835067973028,27.903003321357083,84.66464378614798,27.0036438636575C86.19093689256567,26.104284405957923,87.76516380207337,25.28627288160613,89.37840620471415,24.554243489318C90.9916486073549,23.82221409702987,92.64390650312873,23.176166836805404,94.32581952095168,22.61976169544746C96.00773253877462,22.063356554089516,97.71930067864668,21.596593531598096,99.45082756510153,21.22211693375013C101.18235445155639,20.847640335902163,102.93384008459405,20.565450162697655,104.69536194817427,20.377145077846542C106.45688381175447,20.18883999299543,108.22844190587722,20.094419996497713,109.1142209529386,20.047209998248857L109.99999999999999,20" class="circle"></path>
带有动画的 Fiddle
最佳答案
您可以使用 SVG gradient作为实现这一目标的填充物。诀窍是定义梯度,使其与您想要的分区相对应(即,将停止点设置为 20% 的间隔)。要“硬”停止(即让它看起来不是渐变),在 20% 标记附近紧接着放置 2 个停止,第一个是前一段的颜色,然后是下一段的颜色。我用过这种技术 here .
这对于固定长度的路径应该可以正常工作。如果你想从头到尾动画路径,这个技术不是特别合适。使用这样定义的渐变,无论线的总长度如何,您最终都会得到分区。如果您需要逐渐绘制一条接一条不同颜色的线,则需要动态修改渐变(即停止点)。
关于css - 为 SVG 路径的一部分着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19071088/
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
有两个 SVG 元素( SVG1 和 SVG2 ),其中 SVG1 是一个包含各种元素的大区域,会不时添加、删除和重新定位。另一方面,SVG2 需要用作 图标化表示(小) SVG1 的版本,非常小,但
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。 但是,这种方法似乎不适用
我正在尝试使用 Flutter SVG 依赖项,我将 svg 放入 Assets 中,在 pubspec.yaml 中设置,并在我的小部件中设置,但是,使用黑色容器加载 svg 我已经尝试过更改 sv
为什么这样的演示:http://jsbin.com/ejorus/2/edit,将元素嵌套在另一个元素内? JS
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形 每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
我试图将 play svg 居中放置在 SVG 圆圈的中间,但似乎不知道该怎么做。 垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
是否可以使用一个 SVG 形状作为另一个形状的填充? 最佳答案 您想使用 SVG Pattern .见 this example : 注意
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
我使用 require 的 SVG 没有显示。 在我的终端中,svg Assets 被发出并且路径在我的 html 中正确设置。 但是,SVG 不会显示,而其他格式(如 jpg 或 png)可以显示
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径,我想用公式组合它们:(1*2) + (3*4),即路径 1 和路径 2 应该使用乘法模式混合,类似地路径 3 和路径 4 应该使用混合相
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试,我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成,
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。 问题是什么?为什么
使用联合 js 在 svg 中创建了一个文本区域。但是,我无法在文本区域中输入任何文本。如何使文本区域可编辑? 代码: var graph = new joint.dia.Graph;
您可以不受限制地停止和重复动画,但如果您重新启动一个不确定的动画,它将失去其累积值并从初始值开始。 也许我应该用一个例子来澄清;拿这个动画: 如果我停止此动画,并开始影响同一对象旋转的不同动画(
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中),在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异? 我正在考虑将某种动画从一张图片变成一张完全不同
logo的turtlegraphics的svg路径中是否有等价物? 而不是硬编码的 x 和 y 坐标,这也迫使我在移动更相对的“增量”方法时调整控制点。 我的解决方案应该适用于 FOCS(Firefo
目前正在使用 SVG 元素与一堆 元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题,但没有任何效果。这是一个带有针迹的圆圈的代码:
我是一名优秀的程序员,十分优秀!