在Web開發中繪製路徑。

Question

近日，在開發模擬AGV小車在場地中移動的功能時遇見了難點。

首先是路徑的繪製。AGV小車的移動通過地址標簽和磁條節點標簽控制。將地址標簽連結形成路徑，借由一個點來模擬小車在路徑上移動。我目前考慮到兩種實現方式，一種是SVG，另一種是Canvas。不過，SVG和Canvas我都是第一次接觸，所以在使用上有些困擾，希望各位不吝賜教。
SVG繪製路徑的方式。如果通過這樣的方式來繪製，未免太複雜，也不方便修改。但是它繪製出來是矢量圖像，縮放也不失真。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>

Canvas繪製路徑的方式倒是相對方便，利於修改的，但是一旦圖像繪製完成，修改之後整個場景都需要重新繪製。并且它非常依賴分辨率，在繪製圖像的時候要時刻注意。

var context = document.getElementById("canvas").getContext("2d");
context.lineWidth = 4;
// 画一条垂直黑色线段
context.strokeStyle = "black";
context.moveTo(100, 10);
context.lineTo(100, 100);
context.stroke();
// 画一条水平红色线段
context.strokeStyle = "red";
context.lineTo(190, 100);
context.stroke();

我試著通過Paper.js來使用Canvas，不過效果不太理想。然後我也試用了SVG，在HTML文檔中直接使用<svg>能夠正確的繪製圖形，但是如果引用svg文件就會出現NOT FOUND`。

我在網頁中調用。

然後運行服務器。出現了令人絕望的

我使用的PyCharm是支持svg文件格式的，但是Flask服務器似乎不能正確解析這個文件，希望有知情人能指點一下。
關於路徑的繪製，和控制動畫，希望有大手能給一點思路，或者已有的、相關的解決方案。
感謝，再三感謝。

Answer 1

py不熟，给思路吧。

SVG和Canvas的区别，我觉得前者更偏重于声明式（或者可以说类似于HTML标签），而后者则更多的是命令式的（对应Javascript语言）。这就导致了它们在应用上，SVG使用固定/已有图像、以及相对“固化”的动画效果时，会更有优势一些；而Canvas则足够动态，适用于一些需要复杂逻辑控制（举个例子，比如绘制根据声波变化的连续的正弦曲线）或者在2D/3D或者需要复杂图形学参与的场合。至于矢量还是位图，由于它们都具有操作位图的能力，所以其实都无所谓。
题目中这个我觉得还是SVG更适合，前边说了SVG和HTML相对的会比较亲和，所以如果不是特别大的文件，去掉顶部的XML和Doctype声明之后，是可以直接嵌入到HTML之中的，比如我之前写过的一个H5里，有几张小图都是单独出现的，我为了避免逐个去定位，就把它们直接写到了一个SVG容器里：

<svg id="awardOuter" version="1.1" baseProfile="full" width="540" height="541" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <g id="first" width="150" height="175">
            <image xlink:href="xxx.png" x="0" y="35" width="150" height="75"></image>
            <text font-size="20" fill="white" x="75" y="130" text-anchor="middle">第一</text>
        </g>
        <g id="second" width="150" height="175" transform="rotate(120 75 87)">
            <image xlink:href="yyy.png" x="0" y="35" width="150" height="75"></image>
            <text font-size="20" fill="white" x="75" y="130" text-anchor="middle">第二</text>
        </g>
        <g id="third" width="150" height="175" transform="rotate(240 75 87)">
            <image xlink:href="zzz.png" x="0" y="35" width="150" height="75"></image>
            <text font-size="20" fill="white" x="75" y="130" text-anchor="middle">第三</text>
        </g>
    </defs>
    <image xlink:href="img/temp.png" x="0" y="0" width="540" height="541"></image>
    <use xlink:href="#first" x="195" y="20"></use>
    <use xlink:href="#second" x="334" y="264"></use>
    <use xlink:href="#third" x="50" y="264"></use>
</svg>

这段我是直接写到HTML里的，可以看到SVG主标签上其实就只有SVG命名空间（xmlns="http://www.w3.org/2000/svg"）、版本信息（版本号version="1.1"和相应的语言集baseProfile="full"），然后再加个宽高就可以了（当然如果有复杂缩放可以加上SVG视口属性），定位直接用CSS定位就行。矢量的话也是一样的思路，看你已经写了Demo，可以套进去试试。