Question

jsFiddle

我正在尝试将css过渡应用于svg各种元素。 list1 = ["Title_0", "Title_1"] for i, string in enumerate(list1): if i == 0: print str(i) + ", " + string # Prints: 0, Title_0 btn_monty = Button(the_window, text='Monty Python', command = lambda:the_window.title(string)) #### This also doesn't work #### # btn_monty = Button(the_window, text='Monty Python', command = lambda:the_window.title(list1[i]))适用于圈子，但它不适用于路径。

那么“全部”有什么更具体的内容吗？

编辑：

以下链接有更多信息动画svg行或路径......似乎css过渡不可能......

Can you use CSS transitions on SVG attributes? Like y2 on a line?

Answer 1

转换只能应用于表示属性，以及一些其他属性，如x，y，cx，cy ...... 可在此处找到支持的属性列表http://dev.w3.org/SVG/proposals/css-animation/animation-proposal.html 不幸的是，d不是其中之一......

因为浏览器仍然无法可靠地支持这一点，您可以使用SMIL动画来获得相同的结果。

＆＃13;

var type = true;

setInterval(function() {
    $("#path").attr('from', type ? "M 0 0 L 50 100" : "M 0 0 L 100 50");
    $("#path").attr('to', type ? "M 0 0 L 100 50" : "M 0 0 L 50 100");
    $("#path")[0].beginElement()
    $("#circle").attr('from', type ? "40" : "10");
    $("#circle").attr('to', type ? "10" : "40");
    $("#circle")[0].beginElement()
    type = !type;
}, 1000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
    <path stroke="#000000" stroke-width="5" d="M 0 0 L 100 50" >  
        <animate id="path" attributeName="d" from="M 0 0 L 100 50" to="M 0 0 L 50 100" dur="1s" fill="freeze"/>
    </path>
    <circle fill="#0000FF" cx="10" cy="50" r="10" >
        <animate id="circle" attributeName="cx" from="10" to="40" dur="1s" fill="freeze"/>
    </circle>
</svg>

＆＃13;

css过渡动画不适用于svg路径的“d”属性更改

1 个答案: