标签: stroke-dasharray

我有一系列圆圈,边框由较小的圆圈组成,我称之为"圆点".然后,我通过用CSS3旋转它们来动画圆圈transform,每个旋转5或15度(交替),比最后一个开始旋转,中间圆圈根本不旋转.这种度数的交替是由于它们的一半的原始偏移5deg

动画本身效果很好,但圆圈中每个点之间的偏移不一致.当动画完成时,这一点很明显,一些点跳回来.如果它们都是一致的数量,那么在我的计算中它将是一个错误,但是同一个圆圈周围的点会跳出不同的数量,这意味着它们会以不同的数量偏移开始.在他的答案结束时,瓦尔斯在他的例子中也表明了这种不一致的偏移

以下是每个圆圈的设置方法.通过使用该公式确定每个点之间的间距spacing = (radius × 2) × 3.14159265 ÷ numberOfCircles.这.001是为了让Chrome看到点

<circle cx="30" cy="30" r="radius" stroke-dasharray="0.001, spacing" stroke="color"/>

这是演示jsFiddle

任何人都可以帮我修复这个SVG渲染偏移错误吗？

编辑

vals和squeamish ossifrage都提供了奇妙的解决问题的替代解决方案.但是,如果可能的话,我仍然希望实际修复偏移/渲染问题

打印行与stroke-dasharrayPDF创建不同的行为,请在此处查看图像.

图片A,我直接从浏览器(Chrome)截取的截图.图B是来自同一页面的打印PDF.

请注意图B中的差异,破折号之间有细线,这可能发生在Chrome或PhantomJS(可能与webkit相关？)中,而不是在Firefox中发生.

我想要做的是将这种图表导出为PDF,但是你可以看到strokoe-dasharray没有正确打印.

上面的图片是我从这个MDN页面上看到的,有什么办法可以解决这个问题吗？

我创建了一个SVG动画，允许笔触-dasharray移动。如示例中所示，是否可以向笔触-dasharray的尾部添加渐变并使一侧保持透明？

.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }

<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="300px" height="200px" viewBox="0 0 685 310">
  <g class="st2">
	<path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
	c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
	C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
  </g>
	<use class="sd1" stroke-dasharray="200 1710" xlink:href="#loop-normal">
		<animate attributeName="stroke-dashoffset"
	    	from="200"  to="-1710"
	    	begin="0s" dur="10s"
	    	repeatCount="indefinite"/>  
	</use>

	<circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
	<animateMotion
		xlink:href="#plug"
	  	dur="10s"
		rotate="auto"
		repeatCount="indefinite"
		calcMode="linear"
		keyTimes="0;1"    
		keyPoints="0;1">
		<mpath xlink:href="#loop-normal"/>
	</animateMotion> 
</svg> …

我正在尝试通过使用半径（rx，ry）在svg中创建一个在顶部和底部具有边框/笔触和圆角的矩形。通过使用css属性“ dasharray：width，height”，可以仅使用边框/笔触对顶部和底部进行样式设置。没有半径，则按预期工作。

但是，添加半径后，顶部边框不再从矩形的左上角开始。我试图通过使用css属性dash-offset来纠正此问题，但这似乎会使顶部边框部分消失（尽管它似乎适用于底部边框）。

我们非常感谢您提供有关如何创建一个半径仅为顶部和底部边框的矩形的帮助，以及对正在发生的情况的一些了解。

看到小提琴：https : //jsfiddle.net/Lus8ku7p/

<svg>
  <rect x =10 y=10 id=a ></rect>
  <rect x = 10 y=170 id=b class=round></rect>
  <rect x=170 y=10 id=c ></rect>
  <rect x=170 y=170 id=d class=round></rect>
</svg>
svg{
    width:400px;
    height:400px
}
rect {
   width: 150px;
   height: 150px;
   stroke-width:4px;
   stroke:black;
   fill:red;
   stroke-dasharray: 150 150;
}
.round{
   rx:20px;
   ry:20px;
 }
#c, #d{
   stroke-dashoffset: 40px;
 }

我有一个带有虚线边框的圆圈.但是,边框应该更像是垂直破折号,而不是点.

有没有办法使用css使边框与设计完全相同(垂直划线而不是粗实线)？

我想改变这个类:"OtherCaptionBorder"

我的css:

    .caption_circle{
    position: absolute;
    top: 450px;
    left: 7%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    height: 245px;
    width: 245px;
    background-color: #373737;
    opacity: 0.83;
    border-radius: 50%;
    display: inline-block;
    border-color: #fff;
    border-style: solid;
    border-width: 7px;
    font-family: open_sansregular;
    font-weight: 600;
}
.OtherCaptionBorder{
position: absolute;
    top: 2px;
    left: 1%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    height: 228px;
    width: 228px;
    border-radius: 50%;
    border: 2px dotted #ffffff;
}
.InnerCircleText{
margin-top: 8px;
    font-size: …

circle我正在尝试使用中的元素创建饼图svg。我可以将值填充到 60%、30% 和 10%，但所有圆圈都从同一位置开始。

如何使下一个循环从上一个循环结束的地方开始？

svg { transform: rotate(-90deg); }

circle {
  stroke-width: 3;
  stroke-opacity: 1;
  fill: none; 
}

circle.stroke-yellow {
  stroke: yellow;
  stroke-dasharray: calc(2*3.14*50*60/100),calc(2*3.14*50);    
}

circle.stroke-red {
  stroke: red;
  stroke-dasharray: calc(2*3.14*50*30/100),calc(2*3.14*50);  
}

circle.stroke-blue {
  stroke: blue;
  stroke-dasharray: calc(2*3.14*50*10/100),calc(2*3.14*50);  
}

<svg xmlns="http://www.w3.org/2000/svg" height="220">
    <circle class="stroke-yellow" cy="110"  cx="110" r="50"></circle>
    <circle class="stroke-red" cy="110" cx="110" r="50"></circle>
    <circle class="stroke-blue" cy="110" cx="110" r="50"></circle>
</svg>

我在 CSS 中提到的也stroke-width不起作用。

我使用了这个带有 angular 6 的图表，我在这个图表上遇到了一些冲突，我尝试绑定数据，但我不能这样做，它不能正常工作，

这个stroke-dasharray="5, 100"给我换了这个 stroke-dasharray="{{this.master.locationVsStatusMap.size}}, 100"

闪电战

有谁知道如何正确地做到这一点？

提前致谢！

.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 70%;
  max-height: 150px;
}

.circle-bg {
  fill: none;
  stroke: #3c9ee5;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 3.8;border-right: 1px solid white; border-left: 1px solid white;
  stroke-linecap:square;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #ff9f00;border-right: 1px solid white; …