Html SVG动画翻译
我尝试用SVG创建下一个和上一个按钮 有正方形和三角形。当您看到正方形时,如果单击“下一步”,它将变为三角形。当你们看到三角形时,若你们点击“上一步”,它会变回正方形 如果我单击“下一步”然后单击“上一步”,它将非常有效。但当我再次尝试单击“下一步”时。它不起作用 这是我的SVG代码Html SVG动画翻译,html,svg,Html,Svg,我尝试用SVG创建下一个和上一个按钮 有正方形和三角形。当您看到正方形时,如果单击“下一步”,它将变为三角形。当你们看到三角形时,若你们点击“上一步”,它会变回正方形 如果我单击“下一步”然后单击“上一步”,它将非常有效。但当我再次尝试单击“下一步”时。它不起作用 这是我的SVG代码 <!DOCTYPE HTML> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
<!DOCTYPE HTML>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300" height="300">
<text id="previous" x="50" y="250" font-family="Verdana" font-size="30" fill="blue" >
Prev
</text>
<text id="next" x="200" y="250" font-family="Verdana" font-size="30" fill="blue" >
Next
</text>
<g>
<path id="triangle" d="M450 0 L375 200 L525 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animateColor attributeName="fill"
to="rgb(0,255,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animateColor attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<path id="square" d="M75 0 L225 0 L225 200 L75 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animateColor attributeName="fill"
to="rgb(255,0,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animateColor attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" by="-300,0" begin="next.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
additive="sum" accumulate="sum" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" by="300,0" begin="previous.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
additive="sum" accumulate="sum" fill="freeze"/>
</g>
</body>
</html>
上
下一个
这为我修复了它。请注意,应避免使用animateColor,而应使用animate,因为在SVG规范中不推荐使用animateColor
<!DOCTYPE HTML>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300" height="300">
<text id="previous" x="50" y="250" font-family="Verdana" font-size="30" fill="blue" >
Prev
</text>
<text id="next" x="200" y="250" font-family="Verdana" font-size="30" fill="blue" >
Next
</text>
<g>
<path id="triangle" d="M450 0 L375 200 L525 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animate attributeName="fill"
to="rgb(0,255,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animate attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<path id="square" d="M75 0 L225 0 L225 200 L75 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animate attributeName="fill"
to="rgb(255,0,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animate attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="0,0" by="-300,0" begin="next.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="-300,0" by="300,0" begin="previous.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
fill="freeze"/>
</g>
</body>
</html>
上
下一个