SVG代码HTML 5路黄金螺旋

Question

我期待沿着螺旋路径创建一个文本动画 的东西在这个http://www.html5canvastutorials.com/labs/html5-canvas-spiral-text/

我尝试的线条使，而不是一个在路径上的黄金螺旋以上代码。对于黄金螺旋SVG的代码如下......我曾尝试更换路径数据，但只有第一条曲线负载...

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve"> 
<g id="ARC"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M32,87.344c0,327.678,265.635,593.313,593.313,593.313"/> 
</g> 
<g id="ARC_1_"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M625.313,680.656C827.829,680.656,992,516.485,992,313.969"/> 
</g> 
<g id="ARC_2_"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M992,313.969c0-125.162-101.464-226.625-226.625-226.625"/> 
</g> 
<g id="ARC_3_"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062"/> 
</g> 
<g id="ARC_4_"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563"/> 
</g> 
<g id="ARC_5_"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5"/> 
</g> 
<g id="ARC_6_"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064"/> 
</g> 
<g id="ARC_7_"> 

    <path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435"/> 
</g> 
</svg> 

Answer 1

只需追加路径d属性，并删除其余的弧：

<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
    M32,87.344c0,327.678,265.635,593.313,593.313,593.313   
    M625.313,680.656C827.829,680.656,992,516.485,992,313.969 
    M992,313.969c0-125.162-101.464-226.625-226.625-226.625 
    M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062 
    M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563 
    M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5 
    M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064 
    M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435 
"/>