走进SVG_技术笔记

慕无忌6100076 2020-08-06

<text><tspan> 两个基本文本标签

0赞 · 0采集
_劲 2020-03-26

text & tspan 标签

截图
0赞 · 0采集

丿有点丶小情绪丨 2019-12-10

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sin text</title>
  <style>
    html, body, svg {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<form style="width: 20%;position: absolute; right: 0; top: 10%;">
  <fieldset>
    <legend>参数设置</legend>
    <label style="display: block">
      振幅：<input max="150" min="10" oninput="h = this.value" type="range">
    </label>
    <label style="display: block">
      周期：<input max="10000" min="1" oninput="w = this.value / 10000" type="range">
    </label>

  </fieldset>
</form>
<svg xmlns="http://www.w3.org/2000/svg">
  <!--网格-->
  <g>
    <defs>
      <pattern height="10" id="grid" patternContentUnits="userSpaceOnUse"
               patternUnits="userSpaceOnUse" width="10" x="0"
               y="0">
        <rect fill="none" height="10.5" stroke="#f0f0f0" stroke-dasharray="2" stroke-width=".5"
              width="10.5" x="0"
              y="0"></rect>
      </pattern>
      <pattern height="50" id="bigGrid" patternContentUnits="userSpaceOnUse"
               patternUnits="userSpaceOnUse" width="50" x="0"
               y="0">
        <rect fill="url(#grid)" height="50.5" stroke="#e0e0e0" stroke-width=".5"
              width="50.5"></rect>
      </pattern>
    </defs>
    <rect fill="url(#bigGrid)" height="100%" width="100%" x="0" y="0"></rect>
  </g>

  <g>
    <text id="sinText" style="font-size: 20px" x="200" y="200"></text>
  </g>
</svg>
<script>
  // 获取文本对象
  const textEle = document.getElementById('sinText');

  // dx = [20, 20, 20, ...]
  // y = λsin(ω * x + t)，绝对位置
  // 由于dy属性是相对于之前文字的位置设置的，相对位置的dy
  // dy = λsin(ω * x + t) - λsin(ω * (x-1) + t)
  // 由于 正弦函数具有周期性所有直接 dy = λsin(ω * x + t) 也是可以的

  const text = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let n = text.length,
    dxDistance = 10,
    // 振幅
    h = 80,
    // 周期
    w = .02,
    dxArr = new Array(n),
    dyArr = new Array(n);

  const frg = document.createDocumentFragment();
  for (let i = 0; i < n; i++) {
    dxArr[i] = dxDistance;
    // 使用tspan设置每一个字符的单独颜色
    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    // 不能用这个属性
    // tspan.innerText = text[i];
    tspan.textContent = text[i];
    tspan.setAttribute('fill', `hsl(${360 * i / n}, 100%, 80%)`);

    frg.appendChild(tspan)
  }

  textEle.appendChild(frg);

  // 计算dy数组
  const render = (t = 0) => {
    // 计算绝对的dy
    const calcDy = x => {
      return ~~(h * Math.sin(w * x + t))
    };
    for (let i = 0; i < n; i++) {
      // dyArr[i] = calcDy(dxDistance * i)
      // 计算相对 dy
      dyArr[i] = calcDy(dxDistance * i) - calcDy(dxDistance * (i - 1))
    }

    // 设置dy
    textEle.setAttribute('dx', dxArr.join(','));
    textEle.setAttribute('dy', dyArr.join(','))
  };

  let t = 0;
  const frame = () => {
    render(t += .02);
    requestAnimationFrame(frame)
  };
  frame()


</script>
</body>
</html>

dy是一个相对参数，正确的计算应该减去上一个字符的dy

0赞 · 0采集

慕粉jason 2018-05-20

svg中文字也是作为图形来渲染，并且不支持排版

截图
0赞 · 0采集
Keyro 2017-12-11

svg文本标签标签：<text>,<tspan></tspan> 属性：x,y - 定位标准

截图
0赞 · 1采集
rabbit_lily7 2017-07-05

<path d="M100,0V200M0,100H200 />

0赞 · 0采集
鬼鬼oO 2016-10-08

网格的编辑

截图
0赞 · 0采集
xgqfrms 2016-08-01

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" encoding="UTF-8" width="500" height="500">  <defs> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path d="M0,0H20V20" stroke="rgba(255,255,255,0.7)" fill="none"></path> </pattern> </defs> <rect width="1000" height="600" fill="url(#grid)"></rect> <text x="100" y="100" fill="rgba(0,255,0,0.7)" stroke-width="3"> Hello, SVG text! </text> <text x="300" y="100" stroke="rgba(255,0,255,0.7)" stroke-width="3"> Hello, SVG text! </text> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> </svg>

截图
0赞 · 0采集
Sweet_Gao 2016-05-04

Lesson 5 - SVG文本

0赞 · 0采集
堕落桌子 2016-03-25

有点难，很多不知道什么意思

截图
0赞 · 0采集
蓝宇君 2016-02-18

文本标签

截图
0赞 · 0采集
饭太咸了 2015-08-04

文本标签

截图
0赞 · 0采集
balance_gem 2015-06-12

<text x="" y="" dx="10 20 30 40 50 60" dy=""></text> dx可对每个字体控制

0赞 · 2采集
水木3郎 2015-01-21

文本对其基线英文x字符的左下角位置作为文本基线位置

截图
0赞 · 0采集
水木3郎 2015-01-21

<text x="20" y="20">慕课网-学习的地方</text>

截图
0赞 · 0采集

数据加载中...