究竟是什么标识了网站访问者？

Question

YourDeveloper

Asked:2020-10-13 01:05:38 +0000 UTC2020-10-13 01:05:38 +0000 UTC 2020-10-13 01:05:38 +0000 UTC

如何在svg上画一个圆圈？

772

如何在 svg 上画一个圆圈，以便可以轻松地将橙色从 0 更改为 100%？我在css上尝试过类似的东西，但有些东西不起作用，我是svg的外行

3 个回答

Voted

Akubik · Answer 1 · 2020-10-23T14:00:19Z

您可能对这样的解决方案感兴趣......
有这样一个 D3JS（数据驱动文档）库，它允许您通过扩展 SVG 的功能
来实现美丽的事物，包括您的任务：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .percent-score {
    font: 10px sans-serif;
    line-height: 1;
    font-weight: bold;
    font-size: 4em;
  }
</style>

<body>
  <svg width="900" height="500"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    // оределяем рабочую область и устанавливаем начало координат в ее центр
    var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var radius = d3.min([width, height]) / 2;

    var arc = d3.arc()
      .innerRadius(radius - 120)
      .outerRadius(radius - 80)
      .startAngle(function(d) {
        return d;
      })
      .endAngle(function(d) {
        return d + dblpi / n * 1.2;
      });

    var percent = i = 0;
    var dblpi = 2 * Math.PI;
    var n = 300; //плавность цвета (разрешение)

    g.selectAll("path")
      .data(d3.range(0, dblpi, dblpi / n))
      .enter()
      .append("path")
      .attr("d", arc)
      .attr("id", "sector");

    g.append("text")
      .attr("class", "percent-score")
      .attr("dy", ".35em") // выравниваем текст по центру диаграммы
      .attr("text-anchor", "middle")
      .attr("id", "percent-text")
      .text(percent + "%");

    (function tick() {

      i = (i < n) ? i + 1 : 0;
      percent = (i / n * 100) | 0; // целое число %

      var color = d3.scaleLinear()
        .domain([0, i - 1, i, n])
        .range(["yellow", "orange", "blue", "lightblue"])
        .interpolate(d3.interpolateRgb)

      d3.select("#percent-text")
        .text(percent + "%");

      d3.selectAll("#sector")
        .style("fill", function(d, i) {
          return color(i);
        });
      setTimeout(tick, 30000 / n);
    })();
  </script>

和静态版本：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .percent-score {
    font: 10px sans-serif;
    line-height: 1;
    font-weight: bold;
    font-size: 4em;
  }
</style>

<body>
  <svg width="900" height="500"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    // оределяем рабочую область и устанавливаем начало координат в ее центр
    var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var radius = d3.min([width, height]) / 2;

    var arc = d3.arc()
      .innerRadius(radius - 120)
      .outerRadius(radius - 80)
      .startAngle(function(d) {
        return d;
      })
      .endAngle(function(d) {
        return d + dblpi / n * 1.2;
      }); // 1.2 это чтоб артефакты на переходах перекрыть

    var n = 300; //плавность цвета (разрешение)
    var percent = 25; // процент жёлтооранжевого сектора

    var edge = n / 100 * percent;
    var dblpi = 2 * Math.PI;

    var color = d3.scaleLinear()
      .domain([0, edge - 1, edge, n])
      .range(["yellow", "orange", "blue", "lightblue"])
      .interpolate(d3.interpolateRgb)

    g.selectAll("path")
      .data(d3.range(0, dblpi, dblpi / n))
      .enter()
      .append("path")
      .attr("d", arc)
      .style("fill", function(d, i) {
        return color(i);
      });

    g.append("text")
      .attr("class", "percent-score")
      .attr("dy", ".35em") // выравниваем текст по центру диаграммы
      .attr("text-anchor", "middle")
      .text(percent + "%");
  </script>

但没有具有非线性梯度的 D3 复杂性（沿圆圈）

<!DOCTYPE html>

<svg width="270" height="270">
<defs>
<linearGradient id="hgrad" y2="100%" > 
    <stop offset="0%" style="stop-color:rgb(0,255,255)" />
    <stop offset="100%" style="stop-color:rgb(0,0,255)" />
</linearGradient>
<linearGradient id="lgrad" y1="100%" > 
    <stop offset="0%" style="stop-color:rgb(245,0,0)" />
    <stop offset="100%" style="stop-color:rgb(255,242,61)" />
    </linearGradient>    
</defs>

<g fill="none"> 
	<circle r="100" cx="135" cy="135" 
	stroke-width= "30"
	stroke-dasharray="471 157" 
	stroke="url(#hgrad)"/> <!-- 75%  2*Math.Pi*r*0,75 = 471 --> 	

	<circle r="100" cx="135" cy="135" 
	transform="rotate(-90 135 135)"
	stroke-width= "30"
	stroke-dasharray="157 471" 
	stroke="url(#lgrad)"/> <!-- 25%  2*Math.Pi*r*0,25 = 157 --> 	
</g>
</svg>

有任何想法吗？虽然前面的2个答案对作者来说已经足够了，虽然梯度的问题显然没有解决。

更新1：

上面有图表扇区大小恒定的示例，只是它们的颜色发生了变化，这并不总是好的，这是另一个具有可变扇区大小的选项（在此示例中它们的数量相同，取决于分辨率）现在，在值的边缘，减小扇区的大小可以使颜色保持平滑，并且单独调整分辨率，即不依赖于数据量，饼图模型本身现在是由D3通过Pie pie shape generator计算出来的。

-
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .percent-score {
    font: 10px sans-serif;
    line-height: 1;
    font-weight: bold;
    font-size: 4em;
  }
</style>

<body>
  <svg width="900" height="500"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    // оределяем рабочую область и устанавливаем начало координат в ее центр
    var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var radius = d3.min([width, height]) / 2;

    var percent, ticknum;
    var indata = 200; // шкала данных от 0 до indata
    var gradient = 50; //плавность цвета (разрешение)

    // вычисление цветов секторов в соответствии с разрешением
    var color = d3.scaleLinear()
      .domain([0, gradient - 1, gradient, 2 * gradient])
      .range(["yellow", "orange", "blue", "lightblue"])
      .interpolate(d3.interpolateRgb);

    // вычисление размеров секторов 
    var pie = d3.pie()
      .sort(null);

    var arc = d3.arc();

    // инициализация диаграммы и установка цветов секторам
    var path = g.datum(d3.range(gradient * 2)).selectAll("path")
      .data(pie)
      .enter()
      .append("path")
      .attr("d", arc.innerRadius(radius - 120).outerRadius(radius - 80))
      .style("fill", function(d, i) {
        return color(i);
      });

    g.append("text")
      .attr("class", "percent-score")
      .attr("dy", ".35em") // выравниваем текст по центру диаграммы
      .attr("text-anchor", "middle")
      .attr("id", "percent-text");

    (function tick() {

      ticknum = (ticknum < indata) ? ticknum + 1 : 0;
      percent = (ticknum / indata * 100) | 0; // получаем целое число %

      // определяем коэффициент для расчета размера сектора каждой из 2-х частей диаграммы
      // если текущий сектор меньше gradient то размер сектора увеличивается 
      // (это увеличивающаяся половина секторов диаграммы) иначе уменьшается  
      var sectorsize = d3.scaleThreshold()
        .domain([gradient])
        .range([ticknum / gradient, (indata - ticknum) / gradient]);
    // расчет модели диаграммы
      pie.value(function(d) {
        return sectorsize(d);
      }); 

      path.data(pie) // перерисовка секторов и поправка для конечной границы сектора - убираем артефакты
        .attr("d", arc.endAngle(function(d) {
          return d.endAngle + .01;
        }));

      d3.select("#percent-text")
        .text(percent + "%");

      setTimeout(tick, 30000 / indata);
    })();
  </script>

顺便说一句，这里提出了一个类似的问题

Sinnabon · Answer 2 · 2020-10-13T15:35:34Z

Best Answer

Sinnabon

2020-10-13T15:35:34Z2020-10-13T15:35:34Z

这就是拐杖选项。将 stroke-dashoffset 从 0（全橙色圆圈）更改为 564（全蓝色）。我没有掌握百分比选项，也许你可以这样做。

codepen上的代码

    .circle {
      cx: 60px;
      cy: 60px;
      r: 50px;
      fill: #fff;
      stroke: url(#linear-gradient);
      stroke-width: 4px;
    }

    .circle2 {
      cx: 61px;
      cy: 60px;
      r: 50px;
      fill: transparent;
      stroke: orange;
      stroke-width: 4px;
      stroke-dasharray: 564px;
      stroke-dashoffset: 450px;
      transform: rotate(-90deg) translateX(-121px);
    }

    <svg>
      <linearGradient id="linear-gradient">
        <stop offset="0%" stop-color="blue"/>
        <stop offset="100%" stop-color="aliceblue"/>
      </linearGradient>
      <circle class="circle"></circle>
      <circle class="circle2"></circle>
    </svg>

3

eclipseeer · Answer 3 · 2020-10-17T21:39:55Z

如果您需要静态图像，而不动态更改橙色圆圈，那么我会这样做：

1. 使用circlarc.svg绘制 2 个圆圈- 首先是一个完整的圆圈，然后是一个小部分。2.为每个添加一个渐变（例如angerousTools）。

可以很容易地从 0 更改为 100%

我花了不到一分钟的时间。

<svg fill="none" viewBox="0 0 1000 500"  xmlns="http://www.w3.org/2000/svg">
 <defs> 
    <linearGradient id="lgrad" x1="0%" y1="53%" x2="100%" y2="47%" > 
    <stop offset="0%" style="stop-color:rgb(255,242,61);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(245,0,0);stop-opacity:1" />
    </linearGradient> 
  </defs>
  <defs> 
    <linearGradient id="bluesky" x1="0%" y1="90%" x2="100%" y2="10%" > 
    <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient> 
  </defs>
  
  <path d="M 454 75 C 509.23 75 554 119.77 554 175 L 554 175 C 554 230.23 509.23 275 454 275 L 454 275 C 398.77 275 354 230.23 354 175 L 354 175 C 354 119.77 398.77 75 454 75  L 454 95 C 409.82 95 374 130.82 374 175 L 374 175 C 374 219.18 409.82 255 454 255 L 454 255 C 498.18 255 534 219.18 534 175 L 534 175 C 534 130.82 498.18 95 454 95 Z" 
  fill="url(#bluesky)"/>
  <path d="M 454 75 C 509.23 75 554 119.77 554 175  L 534 175 C 534 130.82 498.18 95 454 95 Z" 
  fill="url(#lgrad)"/>
</svg>

如何在svg上画一个圆圈？

更新1：

Python 3.6 - 安装 MySQL (Windows)

C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

返回指针的函数

我使用 django 管理面板添加图像，但它没有显示

这些条目是什么意思，它们的完整等效项是什么样的

浏览器仍然缓存文件数据

在 Excel VBA 中激活工作表的问题

为什么内置类型中包含复数而小数不包含？

获得唯一途径

告诉我一个像幻灯片一样创建滚动的库

如何在svg上画一个圆圈？

3 个回答

更新1：

相关问题