這個很明顯呀，曲線橫軸是時間t，縱軸是狀態(tài)p。
如果這個曲線有一部分位于第四象限，那么就會有一段t值，會使得p<0，并且不斷減小。
假如狀態(tài)p就是元素向右偏移的距離，那么p<0不就是向左偏了嗎

不會做，就用現(xiàn)成的吧，比如 https://github.com/ariutta/sv...

如果要控制path有個流動的過程用stroke-dashoffset比較好，不知道你為甚么不用這個
例子

關(guān)于線的末端銳角問題，設(shè)置stroke-linecap="round"解決。
關(guān)于線的連線過程銳角問題，設(shè)置stroke-linejoin="round"解決。

background-image: url(back.svg); 可以直接這樣寫嗎？不可以吧

沒辦法，原因是svg是矢量的。
子元素永遠都是相對于父元素的位置關(guān)系。

已經(jīng)獲取到target元素，就可以判斷結(jié)束位置是否是circle元素。不是則調(diào)用line.remove()刪掉

https://www.jianshu.com/p/1dd...
來，給你篇文章，你研究一下

你得對一個不變的元素進行鼠標事件監(jiān)聽，不然不亂套了

function handleMouseMove(event) {
  // console.log(evt)
  const width = document.getElementById('container').scrollWidth;
  const offsetX = event.offsetX


  console.log(width,offsetX,event)
  document.getElementById('rect').setAttribute('x',offsetX/width*1000)
  // const im = evt.target.getScreenCTM();
  // const svg = evt.target.ownerSVGElement;
  // const pt = svg.createSVGPoint();
  // pt.x = evt.clientX;
  // pt.y = evt.clientY;
  // const p = pt.matrixTransform(im);
  // console.log(p.x, p.y);
}

<svg version="1.1" baseProfile="full" width="100%" height="200" viewBox="0 0 1020 200"
xmlns="http://www.w3.org/2000/svg" style="border: 1px solid red" id="container" onmousemove="handleMouseMove(event)">
  <g transform="translate(10,0)">
    <rect id="rect" x="0" width="1000" height="90%" fill="#33546F"/>
    <line x1="100" x2="100" y1="0" y2="90%" stroke="#ccc" id="line" />
  </g>
</svg>

好像有點類似

viewbox可以理解成一個窗口，離窗口越近看的東西越大，反之則越小

相機也是類似，只不過相機的變換則復(fù)雜的多，通過矩陣的變換才能實現(xiàn)類似效果

已找到問題所在，因為文字默認有'fill:black'的屬性，而stroke是沿著文字邊框向內(nèi)和向外擴展stroke-width數(shù)值的一半。所以最后一個text標簽的fill擋住了前面text標簽的一半stroke。
將text的fill設(shè)為none可解決問題。

stroke, clip, mask 和 filter 都不納入寬高計算。你的圓弧起于 50,5 止于 95,50 ，外部有 5 是 stroke 的一半。

svg中的元素都是dom元素是可以綁定dom事件的

因為還在加班所以大致提個思路，當然不一定對啊..
0、先寫個div，border為1px，隱藏
1、在上面的點點擊時，修改一個狀態(tài)表示flag = true，并記下點擊坐標
2、在hover到下面的點的時候，如果flag == true，那讓div顯示出來，然后獲得移入坐標
3、給div做變換，scale跟rotate用起點跟終點的坐標算
4、顯示div
5、flag = false

請問問題解決沒有，我也有同樣的問題 T_T

pixijs吧 canvasAPI不是人用的。。。

<svg>
    <g class="content" id="g1>
        ...
    </g>
</svg>
<script>
var boxInfo = document.getElementById('g1').getBBox();
var rectInfo = document.getElementById('g1').getBoundingClientRect();

console.log(boxInfo, rectInfo);
</script>

了解下SVG的視口縮放，圖一里的視口參數(shù)里可以比較明顯的看到48這個數(shù)字，個人覺得如果寬高用定值的話，會失去一部分矢量的靈活性。當然如果你用SVG插位圖的話，那無所謂。

RE=/^(.*) ([0-9]{3}-[0-9]{4}-[0-9]{2}-[0-9])編號的(.*)來了$/

<title></title>

eg:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>SVG Title Demo example</title>
    <rect x="10" y="10" width="200" height="50"
    style="fill:none; stroke:blue; stroke-width:1px"/>
  </g>
</svg>