svg 代码 HTML 5 路径金色螺旋答案

【问题标题】：svg code HTML 5 path golden spiralsvg 代码 HTML 5 路径金色螺旋
【发布时间】：2013-02-21 02:45:54
【问题描述】：

我正在寻找沿着螺旋路径创建文本动画这个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>

【问题讨论】：

标签： html svg kineticjs

【解决方案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
"/>

【讨论】：

嗨 duopixel，我实际上已经尝试过了，并没有真正起作用jsfiddle.net/textonym/bAESn
嗯，有几个失败点。我尝试的第一件事是在纯 SVG 中实现，看看问题是否依赖于库（kinectjs），当然这不是一项简单的任务，所以它不是“简单的事情”
我也会尝试使用具有绝对值的路径（路径语法应该是大写的C's）。但这实在是摸不着头脑，需要通过反复试验找到故障点。
感谢您的提示...我已经离开了...但会再试一次...只是在玩动能。感谢双像素的帮助。