AngularJS + SVG 地雷

情況是這樣的。由於 html5mode 很漂亮, 不再有醜陋的 hash 在網址裡頭, 所以理所當然的就想辦法用這個模式。然而, IE9 並不支援 History API, 因此依照 AngularJS 的文件, 要弄個

<base href="/blabla" />

在 head 裡頭。

這都還不打緊, 但是當我想要使用 SVG 的 textPath 的時候, 他就爆炸了。textPath 是一個可以讓文字彎彎曲曲, 依照先前定義的 path 來編排的一個功能, 他的語法大致如下

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="myTextPath" d="M75,20 a1,1 0 0,0 100,0" />
    </defs>
 
    <text x="10" y="100" style="stroke: #000000;">
      <textPath xlink:href="#myTextPath" >
            Text along a curved path...
      </textPath>
    </text>
</svg>

Reference: The SVG textpath element

在 <defs> 裡頭定義了一個 path, 然後接著在 textPath 裡頭會藉由 xlink:href 來指向這個 path。

此時麻煩來了, 由於 angularjs 定義了 base, 因此 xlink:href 就會自動解讀為 /blabla#myTextPath, 而造成失效 (原因是這段 svg 是動態產生的), 他確實是會想要透過網路抓取外部資料, 而我沒有任何方式可以把 base 的設定取消。

於是, 就造成了一種死結無解的狀態… orz

最後我用了爛招, 就是我把 SVG 搬移到外面, 並且給他參數讓他自動產生我想要的向量… 真的滿弱的… 只是, 這種組合又有多少人會碰到呢?