相关疑难解决方法(0)

<html>
    <body>
        <svg id="svgConnections" xmlns="http://www.w3.org/2000/svg" style="width: 300px; height: 120px">
            <defs>
                <linearGradient id="grad1" >
                <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
                <stop offset="100%" style="stop-color:red;stop-opacity:1" />
                </linearGradient>
            </defs>            
            <path d="M40,40 L100,100 Z" stroke="url(#grad1)" strokeWidth="1px" />
            <path d="M200,100 L140,40 Z" stroke="url(#grad1)" strokeWidth="1px" />
        </svg>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

同样的例子在https://jsfiddle.net/4fLjm0e2/

让我感到困惑的是,从左上角到右下角的第一条线看起来与第二条线完全相同,后面是"反向":从右下角到左上角.

如何使路径始终以黄色开头并以红色结束？

html javascript svg dom

boh*_*nko

lucky-day

5
推荐指数

0
解决办法

121
查看次数

SVG-可以在一侧添加笔划-dasharray渐变或透明形式

我创建了一个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; }

Run Code Online (Sandbox Code Playgroud)

<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> …

Run Code Online (Sandbox Code Playgroud)

html css animation svg stroke-dasharray

Fig*_*Ali

lucky-day

5
推荐指数

1
解决办法

369
查看次数

带有 SVG 颜色渐变的圆形进度指示器？

我需要制作一个带有颜色渐变的圆形进度指示器。我还需要将进度圈的“末端”四舍五入。这张图片包含了我想要实现的一切：

这段代码很接近，但没有颜色渐变：

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/OJybqza

var control = document.getElementById('control');
var progressValue = document.querySelector('.progress__value');

var RADIUS = 54;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;

function progress(value) {
  var progress = value / 100;
  var dashoffset = CIRCUMFERENCE * (1 - progress);

  console.log('progress:', value + '%', '|', 'offset:', dashoffset)

  progressValue.style.strokeDashoffset = dashoffset;
}

control.addEventListener('input', function(event) {
  progress(event.target.valueAsNumber);
});

progressValue.style.strokeDasharray = CIRCUMFERENCE;
progress(60);

Run Code Online (Sandbox Code Playgroud)

.demo {
  flex-direction: column;
  display: flex;
  width: 120px;
}

.progress {
  transform: rotate(-90deg);
}

.progress__meter,
.progress__value {
  fill: none;
} …

Run Code Online (Sandbox Code Playgroud)

svg

Eva*_*nss

2020 04-28

5
推荐指数

1
解决办法

1864
查看次数

SVG 中路径的渐变

我在 SVG 中有一条非常简单的路径。

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 61 57" 
    version="1.1" x="0px" y="0px">
    <defs>
        <style type="text/css"><![CDATA[
            ]]>
        </style>
    </defs>
    <path id="pipe" d="
        M8.0178,52.0035
        L27.0178,52.0035
        C42.4568,52.0035 55.0178,39.4425 55.0178,24.0035
        L55.0178,8.0035
        L43.0178,8.0035
        L43.0178,24.0035
        C43.0178,32.8255 35.8398,40.0035 27.0178,40.0035
        L8.0178,40.0035
        L8.0178,52.0035
        Z">
    </path>
</svg>

Run Code Online (Sandbox Code Playgroud)

（预览： https: //i.stack.imgur.com/FfBRg.png）

我想要实现的是我有 3 个独立的渐变或填充空间：