Question

我刚刚开始学习SVG，而且我来自管理背景。

对我而言，路径在理解SVG时遇到了麻烦。我现在可以创建圆形，矩形和平移和缩放但我无法使用路径。

我创建了一个JSfiddle来玩SVG和创意动画：http://jsbin.com/hificutebu/3/edit?html,output

你可以看到，我有动画的飞机从向下移动到向上，但飞机看起来很小。

如何增加尺寸以使其看起来完美？正在使用路径创建平面。任何人都可以帮我增加解释尺寸吗？

<g id="plane" transform="translate(45, 8)" fill="#C3922E">
<path d="M23.9521429,16.0247273 C24.0607143,15.4996364 22.1314286,9.57454545 22.1728571,9.41454545 C22.4507143,9.21454545 23.6271429,8.10618182 23.6271429,7.93745455 C23.6271429,7.76872727 22.8571429,6.99054545 22.72,7.01090909 C22.5835714,7.032 21.9328571,7.73818182 21.7728571,7.95127273 C21.63,7.95490909 21.26,5.92654545 21.4085714,5.77527273 C21.5578571,5.62327273 23.1907143,4.09963636 24.2078571,3.04290909 C25.0607143,2.15636364 25.2457143,0.761454545 25.1285714,0.641454545 C25.0107143,0.522181818 23.6407143,0.710545455 22.77,1.57890909 C21.7321429,2.61454545 20.2357143,4.27636364 20.0864286,4.42909091 C19.9378571,4.57963636 17.9464286,4.20290909 17.9492857,4.05745455 C18.1592857,3.89381818 18.8528571,3.23272727 18.8721429,3.09309091 C18.8928571,2.95490909 18.1285714,2.16872727 17.9628571,2.16872727 C17.7964286,2.16872727 16.7092857,3.36654545 16.5114286,3.64945455 C16.3542857,3.69236364 10.535,1.728 10.02,1.83927273 C9.505,1.94909091 8.88857143,2.42836364 9.02785714,2.57018182 C9.16714286,2.71127273 13.6592857,4.76872727 14.44,5.27054545 C15.22,5.77309091 16.7171429,7.23927273 16.7171429,7.41672727 C16.7171429,7.59490909 12.7042857,12.1796364 12.4707143,12.3730909 C12.2371429,12.5658182 10.5071429,11.7127273 9.83571429,11.808 C9.16357143,11.9025455 8.64428571,12.408 8.68642857,12.5665455 C8.72857143,12.7243636 11.3271429,13.9047273 11.1978571,14.1330909 C11.0971429,14.3098182 10.3671429,15.5018182 10.4507143,15.5869091 C10.5342857,15.6712727 11.7057143,14.9287273 11.8792857,14.8261818 C12.1042857,14.6930909 13.2635714,17.3410909 13.4178571,17.384 C13.5728571,17.4261818 14.07,16.8967273 14.1621429,16.2130909 C14.2557143,15.5287273 13.4178571,13.768 13.6078571,13.5301818 C13.7971429,13.2923636 18.3,9.20654545 18.4757143,9.20654545 C18.6507143,9.20654545 20.09,10.7301818 20.5828571,11.5250909 C21.0764286,12.3192727 23.0964286,16.8930909 23.2357143,17.0349091 C23.3735714,17.1774545 23.8428571,16.5483636 23.9521429,16.0247273 L23.9521429,20.0247273 Z" id="Shape"></path>
<path xmlns="http://www.w3.org/2000/svg" d="M1.81642857,25.7505455 C2.30571429,24.7767273 2.87714286,23.8269091 3.49642857,22.8974545 C3.81142857,22.4363636 4.13428571,21.9774545 4.47428571,21.5294545 L4.72714286,21.192 L4.98785714,20.8589091 C5.16071429,20.6356364 5.34071429,20.4181818 5.52071429,20.1992727 C5.88142857,19.7636364 6.25214286,19.3352727 6.63071429,18.912 C6.82,18.7010909 7.01214286,18.4989091 7.20214286,18.2909091 L7.80357143,17.6661818 L8.4,17.0705455 C8.60571429,16.8749091 8.80785714,16.6756364 9.015,16.4829091 C9.43071429,16.0989091 9.85,15.7185455 10.2785714,15.3512727 C10.2814286,15.3483636 10.2835714,15.3469091 10.2871429,15.3447273 C10.4628571,15.032 10.65,14.7229091 10.6971429,14.64 C10.7557143,14.5352727 10.2542857,14.2370909 9.685,13.9265455 C9.57214286,14.0181818 9.45928571,14.1112727 9.34642857,14.2036364 C9.11785714,14.3883636 8.89714286,14.5825455 8.67357143,14.7745455 C8.45,14.9665455 8.23571429,15.1687273 8.01642857,15.3658182 C7.79928571,15.5643636 7.58714286,15.7709091 7.37285714,15.9730909 L6.73714286,16.6007273 L6.13642857,17.2305455 C5.93571429,17.4516364 5.73071429,17.6698182 5.53428571,17.8909091 C5.14285714,18.3338182 4.75785714,18.7825455 4.39214286,19.2458182 C4.20857143,19.4763636 4.025,19.7083636 3.84928571,19.944 L3.58285714,20.2974545 L3.32428571,20.6552727 C2.98,21.1323636 2.65857143,21.6247273 2.34285714,22.1192727 C2.19,22.3694545 2.03428571,22.6181818 1.88714286,22.8698182 C1.74285714,23.1272727 1.59571429,23.3789091 1.46071429,23.6378182 C1.18142857,24.1490909 0.927857143,24.6741818 0.69,25.2014545 C0.473571429,25.7054545 0.272142857,26.2123636 0.0971428571,26.7287273 C0.385,27.0487273 0.685714286,27.3570909 0.992857143,27.6581818 C1.045,27.5149091 1.09428571,27.3701818 1.14928571,27.2261818 C1.34571429,26.7287273 1.575,26.2385455 1.81642857,25.7505455 L1.81642857,25.7505455 Z" id="Shape"/>
<path xmlns="http://www.w3.org/2000/svg" d="M2.61857143,28.7214545 C2.81428571,28.2232727 3.04357143,27.7330909 3.285,27.2458182 C3.77428571,26.272 4.34571429,25.3214545 4.96571429,24.3927273 C5.28,23.9316364 5.60285714,23.4727273 5.94357143,23.024 L6.19714286,22.6865455 L6.45785714,22.3541818 C6.63,22.1301818 6.81,21.912 6.99071429,21.6938182 C7.35142857,21.2581818 7.72214286,20.8298182 8.10071429,20.4065455 C8.28928571,20.1956364 8.48142857,19.9941818 8.67214286,19.7861818 L9.27428571,19.1614545 L9.87,18.5650909 C10.075,18.3694545 10.2778571,18.1709091 10.485,17.9774545 C10.9007143,17.5941818 11.32,17.2130909 11.7478571,16.8458182 C11.8821429,16.7309091 12.0171429,16.6167273 12.1528571,16.5032727 C11.8235714,15.8690909 11.49,15.2690909 11.3792857,15.3330909 C11.3185714,15.3694545 11.135,15.4843636 10.9185714,15.6145455 C10.8842857,15.6429091 10.85,15.6698182 10.815,15.6989091 C10.5857143,15.8829091 10.3657143,16.0778182 10.1414286,16.2698182 C9.91785714,16.4618182 9.70357143,16.664 9.48428571,16.8603636 C9.26642857,17.0596364 9.055,17.2661818 8.84071429,17.4683636 L8.205,18.0967273 L7.60428571,18.7265455 C7.40357143,18.9469091 7.19857143,19.1658182 7.00214286,19.3869091 C6.61071429,19.8298182 6.22571429,20.2785455 5.86,20.7410909 C5.67642857,20.9723636 5.49285714,21.2029091 5.31714286,21.4392727 L5.05142857,21.7927273 L4.79285714,22.1512727 C4.44928571,22.6283636 4.12642857,23.1207273 3.81142857,23.6145455 C3.65928571,23.8654545 3.50357143,24.1127273 3.35642857,24.3658182 C3.21214286,24.6210909 3.06428571,24.872 2.93,25.1309091 C2.65071429,25.6421818 2.39785714,26.1672727 2.16,26.6945455 C1.94642857,27.1927273 1.74642857,27.6938182 1.57357143,28.2029091 C1.87928571,28.48 2.19428571,28.7447273 2.51714286,29.0014545 C2.55071429,28.9090909 2.58214286,28.8145455 2.61857143,28.7214545 L2.61857143,28.7214545 Z" id="Shape"/>
<animateTransform
   attributeName="transform"
   id="plane"
   type="translate"
   from="15 40"
   to="45 8"
   dur="2s"
   begin="0s"
   fill="freeze"
   repeatCount="indefinite"
/>
</g>

Answer 1

<animateTransform>适用于它所包含的整个元素（在您的示例中，它包含在<g>元素中）。因此它将覆盖<g>元素的变换。因此，您有三种方法可以解决此问题：

选项1

使用其他<animateTransform>。如果您希望更改大小，如下例所示，这会更有用，但您也可以保持to和from大小相同。：

<g id="plane" fill="#C3922E">
<path d="M23.9521429,16.0247273 C24.0607143,15.4996364 22.1314286,9.57454545 22.1728571,9.41454545 C22.4507143,9.21454545 23.6271429,8.10618182 23.6271429,7.93745455 C23.6271429,7.76872727 22.8571429,6.99054545 22.72,7.01090909 C22.5835714,7.032 21.9328571,7.73818182 21.7728571,7.95127273 C21.63,7.95490909 21.26,5.92654545 21.4085714,5.77527273 C21.5578571,5.62327273 23.1907143,4.09963636 24.2078571,3.04290909 C25.0607143,2.15636364 25.2457143,0.761454545 25.1285714,0.641454545 C25.0107143,0.522181818 23.6407143,0.710545455 22.77,1.57890909 C21.7321429,2.61454545 20.2357143,4.27636364 20.0864286,4.42909091 C19.9378571,4.57963636 17.9464286,4.20290909 17.9492857,4.05745455 C18.1592857,3.89381818 18.8528571,3.23272727 18.8721429,3.09309091 C18.8928571,2.95490909 18.1285714,2.16872727 17.9628571,2.16872727 C17.7964286,2.16872727 16.7092857,3.36654545 16.5114286,3.64945455 C16.3542857,3.69236364 10.535,1.728 10.02,1.83927273 C9.505,1.94909091 8.88857143,2.42836364 9.02785714,2.57018182 C9.16714286,2.71127273 13.6592857,4.76872727 14.44,5.27054545 C15.22,5.77309091 16.7171429,7.23927273 16.7171429,7.41672727 C16.7171429,7.59490909 12.7042857,12.1796364 12.4707143,12.3730909 C12.2371429,12.5658182 10.5071429,11.7127273 9.83571429,11.808 C9.16357143,11.9025455 8.64428571,12.408 8.68642857,12.5665455 C8.72857143,12.7243636 11.3271429,13.9047273 11.1978571,14.1330909 C11.0971429,14.3098182 10.3671429,15.5018182 10.4507143,15.5869091 C10.5342857,15.6712727 11.7057143,14.9287273 11.8792857,14.8261818 C12.1042857,14.6930909 13.2635714,17.3410909 13.4178571,17.384 C13.5728571,17.4261818 14.07,16.8967273 14.1621429,16.2130909 C14.2557143,15.5287273 13.4178571,13.768 13.6078571,13.5301818 C13.7971429,13.2923636 18.3,9.20654545 18.4757143,9.20654545 C18.6507143,9.20654545 20.09,10.7301818 20.5828571,11.5250909 C21.0764286,12.3192727 23.0964286,16.8930909 23.2357143,17.0349091 C23.3735714,17.1774545 23.8428571,16.5483636 23.9521429,16.0247273 L23.9521429,20.0247273 Z" id="Shape"></path>
<path xmlns="http://www.w3.org/2000/svg" d="M1.81642857,25.7505455 C2.30571429,24.7767273 2.87714286,23.8269091 3.49642857,22.8974545 C3.81142857,22.4363636 4.13428571,21.9774545 4.47428571,21.5294545 L4.72714286,21.192 L4.98785714,20.8589091 C5.16071429,20.6356364 5.34071429,20.4181818 5.52071429,20.1992727 C5.88142857,19.7636364 6.25214286,19.3352727 6.63071429,18.912 C6.82,18.7010909 7.01214286,18.4989091 7.20214286,18.2909091 L7.80357143,17.6661818 L8.4,17.0705455 C8.60571429,16.8749091 8.80785714,16.6756364 9.015,16.4829091 C9.43071429,16.0989091 9.85,15.7185455 10.2785714,15.3512727 C10.2814286,15.3483636 10.2835714,15.3469091 10.2871429,15.3447273 C10.4628571,15.032 10.65,14.7229091 10.6971429,14.64 C10.7557143,14.5352727 10.2542857,14.2370909 9.685,13.9265455 C9.57214286,14.0181818 9.45928571,14.1112727 9.34642857,14.2036364 C9.11785714,14.3883636 8.89714286,14.5825455 8.67357143,14.7745455 C8.45,14.9665455 8.23571429,15.1687273 8.01642857,15.3658182 C7.79928571,15.5643636 7.58714286,15.7709091 7.37285714,15.9730909 L6.73714286,16.6007273 L6.13642857,17.2305455 C5.93571429,17.4516364 5.73071429,17.6698182 5.53428571,17.8909091 C5.14285714,18.3338182 4.75785714,18.7825455 4.39214286,19.2458182 C4.20857143,19.4763636 4.025,19.7083636 3.84928571,19.944 L3.58285714,20.2974545 L3.32428571,20.6552727 C2.98,21.1323636 2.65857143,21.6247273 2.34285714,22.1192727 C2.19,22.3694545 2.03428571,22.6181818 1.88714286,22.8698182 C1.74285714,23.1272727 1.59571429,23.3789091 1.46071429,23.6378182 C1.18142857,24.1490909 0.927857143,24.6741818 0.69,25.2014545 C0.473571429,25.7054545 0.272142857,26.2123636 0.0971428571,26.7287273 C0.385,27.0487273 0.685714286,27.3570909 0.992857143,27.6581818 C1.045,27.5149091 1.09428571,27.3701818 1.14928571,27.2261818 C1.34571429,26.7287273 1.575,26.2385455 1.81642857,25.7505455 L1.81642857,25.7505455 Z" id="Shape"/>
<path xmlns="http://www.w3.org/2000/svg" d="M2.61857143,28.7214545 C2.81428571,28.2232727 3.04357143,27.7330909 3.285,27.2458182 C3.77428571,26.272 4.34571429,25.3214545 4.96571429,24.3927273 C5.28,23.9316364 5.60285714,23.4727273 5.94357143,23.024 L6.19714286,22.6865455 L6.45785714,22.3541818 C6.63,22.1301818 6.81,21.912 6.99071429,21.6938182 C7.35142857,21.2581818 7.72214286,20.8298182 8.10071429,20.4065455 C8.28928571,20.1956364 8.48142857,19.9941818 8.67214286,19.7861818 L9.27428571,19.1614545 L9.87,18.5650909 C10.075,18.3694545 10.2778571,18.1709091 10.485,17.9774545 C10.9007143,17.5941818 11.32,17.2130909 11.7478571,16.8458182 C11.8821429,16.7309091 12.0171429,16.6167273 12.1528571,16.5032727 C11.8235714,15.8690909 11.49,15.2690909 11.3792857,15.3330909 C11.3185714,15.3694545 11.135,15.4843636 10.9185714,15.6145455 C10.8842857,15.6429091 10.85,15.6698182 10.815,15.6989091 C10.5857143,15.8829091 10.3657143,16.0778182 10.1414286,16.2698182 C9.91785714,16.4618182 9.70357143,16.664 9.48428571,16.8603636 C9.26642857,17.0596364 9.055,17.2661818 8.84071429,17.4683636 L8.205,18.0967273 L7.60428571,18.7265455 C7.40357143,18.9469091 7.19857143,19.1658182 7.00214286,19.3869091 C6.61071429,19.8298182 6.22571429,20.2785455 5.86,20.7410909 C5.67642857,20.9723636 5.49285714,21.2029091 5.31714286,21.4392727 L5.05142857,21.7927273 L4.79285714,22.1512727 C4.44928571,22.6283636 4.12642857,23.1207273 3.81142857,23.6145455 C3.65928571,23.8654545 3.50357143,24.1127273 3.35642857,24.3658182 C3.21214286,24.6210909 3.06428571,24.872 2.93,25.1309091 C2.65071429,25.6421818 2.39785714,26.1672727 2.16,26.6945455 C1.94642857,27.1927273 1.74642857,27.6938182 1.57357143,28.2029091 C1.87928571,28.48 2.19428571,28.7447273 2.51714286,29.0014545 C2.55071429,28.9090909 2.58214286,28.8145455 2.61857143,28.7214545 L2.61857143,28.7214545 Z" id="Shape"/>
<animateTransform
   attributeName="transform"
   id="plane"
   type="translate"
   from="15 40"
   to="45 8"
   dur="2s"
   begin="0s"
   fill="freeze"
   repeatCount="indefinite"
/>
<animateTransform attributeName="transform"
    type="scale"
    from="1 1"
    to="3 1.25"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
/>
</g>

选项2

显然，如果您不想对比例进行动画处理，则选项1可能不是最佳选择。相反，您可能只想使用将封装所有内容的父<g>元素。 animateTransform只会覆盖内部<g>元素的变换，但您仍然可以控制外部<g>元素：

<g transform="scale(3, 1.25)">
    <g id="plane" fill="#C3922E">
    <path d="M23.9521429,16.0247273 C24.0607143,15.4996364 22.1314286,9.57454545 22.1728571,9.41454545 C22.4507143,9.21454545 23.6271429,8.10618182 23.6271429,7.93745455 C23.6271429,7.76872727 22.8571429,6.99054545 22.72,7.01090909 C22.5835714,7.032 21.9328571,7.73818182 21.7728571,7.95127273 C21.63,7.95490909 21.26,5.92654545 21.4085714,5.77527273 C21.5578571,5.62327273 23.1907143,4.09963636 24.2078571,3.04290909 C25.0607143,2.15636364 25.2457143,0.761454545 25.1285714,0.641454545 C25.0107143,0.522181818 23.6407143,0.710545455 22.77,1.57890909 C21.7321429,2.61454545 20.2357143,4.27636364 20.0864286,4.42909091 C19.9378571,4.57963636 17.9464286,4.20290909 17.9492857,4.05745455 C18.1592857,3.89381818 18.8528571,3.23272727 18.8721429,3.09309091 C18.8928571,2.95490909 18.1285714,2.16872727 17.9628571,2.16872727 C17.7964286,2.16872727 16.7092857,3.36654545 16.5114286,3.64945455 C16.3542857,3.69236364 10.535,1.728 10.02,1.83927273 C9.505,1.94909091 8.88857143,2.42836364 9.02785714,2.57018182 C9.16714286,2.71127273 13.6592857,4.76872727 14.44,5.27054545 C15.22,5.77309091 16.7171429,7.23927273 16.7171429,7.41672727 C16.7171429,7.59490909 12.7042857,12.1796364 12.4707143,12.3730909 C12.2371429,12.5658182 10.5071429,11.7127273 9.83571429,11.808 C9.16357143,11.9025455 8.64428571,12.408 8.68642857,12.5665455 C8.72857143,12.7243636 11.3271429,13.9047273 11.1978571,14.1330909 C11.0971429,14.3098182 10.3671429,15.5018182 10.4507143,15.5869091 C10.5342857,15.6712727 11.7057143,14.9287273 11.8792857,14.8261818 C12.1042857,14.6930909 13.2635714,17.3410909 13.4178571,17.384 C13.5728571,17.4261818 14.07,16.8967273 14.1621429,16.2130909 C14.2557143,15.5287273 13.4178571,13.768 13.6078571,13.5301818 C13.7971429,13.2923636 18.3,9.20654545 18.4757143,9.20654545 C18.6507143,9.20654545 20.09,10.7301818 20.5828571,11.5250909 C21.0764286,12.3192727 23.0964286,16.8930909 23.2357143,17.0349091 C23.3735714,17.1774545 23.8428571,16.5483636 23.9521429,16.0247273 L23.9521429,20.0247273 Z" id="Shape"></path>
    <path xmlns="http://www.w3.org/2000/svg" d="M1.81642857,25.7505455 C2.30571429,24.7767273 2.87714286,23.8269091 3.49642857,22.8974545 C3.81142857,22.4363636 4.13428571,21.9774545 4.47428571,21.5294545 L4.72714286,21.192 L4.98785714,20.8589091 C5.16071429,20.6356364 5.34071429,20.4181818 5.52071429,20.1992727 C5.88142857,19.7636364 6.25214286,19.3352727 6.63071429,18.912 C6.82,18.7010909 7.01214286,18.4989091 7.20214286,18.2909091 L7.80357143,17.6661818 L8.4,17.0705455 C8.60571429,16.8749091 8.80785714,16.6756364 9.015,16.4829091 C9.43071429,16.0989091 9.85,15.7185455 10.2785714,15.3512727 C10.2814286,15.3483636 10.2835714,15.3469091 10.2871429,15.3447273 C10.4628571,15.032 10.65,14.7229091 10.6971429,14.64 C10.7557143,14.5352727 10.2542857,14.2370909 9.685,13.9265455 C9.57214286,14.0181818 9.45928571,14.1112727 9.34642857,14.2036364 C9.11785714,14.3883636 8.89714286,14.5825455 8.67357143,14.7745455 C8.45,14.9665455 8.23571429,15.1687273 8.01642857,15.3658182 C7.79928571,15.5643636 7.58714286,15.7709091 7.37285714,15.9730909 L6.73714286,16.6007273 L6.13642857,17.2305455 C5.93571429,17.4516364 5.73071429,17.6698182 5.53428571,17.8909091 C5.14285714,18.3338182 4.75785714,18.7825455 4.39214286,19.2458182 C4.20857143,19.4763636 4.025,19.7083636 3.84928571,19.944 L3.58285714,20.2974545 L3.32428571,20.6552727 C2.98,21.1323636 2.65857143,21.6247273 2.34285714,22.1192727 C2.19,22.3694545 2.03428571,22.6181818 1.88714286,22.8698182 C1.74285714,23.1272727 1.59571429,23.3789091 1.46071429,23.6378182 C1.18142857,24.1490909 0.927857143,24.6741818 0.69,25.2014545 C0.473571429,25.7054545 0.272142857,26.2123636 0.0971428571,26.7287273 C0.385,27.0487273 0.685714286,27.3570909 0.992857143,27.6581818 C1.045,27.5149091 1.09428571,27.3701818 1.14928571,27.2261818 C1.34571429,26.7287273 1.575,26.2385455 1.81642857,25.7505455 L1.81642857,25.7505455 Z" id="Shape"/>
    <path xmlns="http://www.w3.org/2000/svg" d="M2.61857143,28.7214545 C2.81428571,28.2232727 3.04357143,27.7330909 3.285,27.2458182 C3.77428571,26.272 4.34571429,25.3214545 4.96571429,24.3927273 C5.28,23.9316364 5.60285714,23.4727273 5.94357143,23.024 L6.19714286,22.6865455 L6.45785714,22.3541818 C6.63,22.1301818 6.81,21.912 6.99071429,21.6938182 C7.35142857,21.2581818 7.72214286,20.8298182 8.10071429,20.4065455 C8.28928571,20.1956364 8.48142857,19.9941818 8.67214286,19.7861818 L9.27428571,19.1614545 L9.87,18.5650909 C10.075,18.3694545 10.2778571,18.1709091 10.485,17.9774545 C10.9007143,17.5941818 11.32,17.2130909 11.7478571,16.8458182 C11.8821429,16.7309091 12.0171429,16.6167273 12.1528571,16.5032727 C11.8235714,15.8690909 11.49,15.2690909 11.3792857,15.3330909 C11.3185714,15.3694545 11.135,15.4843636 10.9185714,15.6145455 C10.8842857,15.6429091 10.85,15.6698182 10.815,15.6989091 C10.5857143,15.8829091 10.3657143,16.0778182 10.1414286,16.2698182 C9.91785714,16.4618182 9.70357143,16.664 9.48428571,16.8603636 C9.26642857,17.0596364 9.055,17.2661818 8.84071429,17.4683636 L8.205,18.0967273 L7.60428571,18.7265455 C7.40357143,18.9469091 7.19857143,19.1658182 7.00214286,19.3869091 C6.61071429,19.8298182 6.22571429,20.2785455 5.86,20.7410909 C5.67642857,20.9723636 5.49285714,21.2029091 5.31714286,21.4392727 L5.05142857,21.7927273 L4.79285714,22.1512727 C4.44928571,22.6283636 4.12642857,23.1207273 3.81142857,23.6145455 C3.65928571,23.8654545 3.50357143,24.1127273 3.35642857,24.3658182 C3.21214286,24.6210909 3.06428571,24.872 2.93,25.1309091 C2.65071429,25.6421818 2.39785714,26.1672727 2.16,26.6945455 C1.94642857,27.1927273 1.74642857,27.6938182 1.57357143,28.2029091 C1.87928571,28.48 2.19428571,28.7447273 2.51714286,29.0014545 C2.55071429,28.9090909 2.58214286,28.8145455 2.61857143,28.7214545 L2.61857143,28.7214545 Z" id="Shape"/>
    <animateTransform
       attributeName="transform"
       id="plane"
       type="translate"
       from="15 40"
       to="45 8"
       dur="2s"
       begin="0s"
       fill="freeze"
       repeatCount="indefinite"
    />

  </g>
</g>

选项3

感谢Robert Longson的这一次。我不知道additive="sum"。 additive="sum"允许您合并多个转换而不是覆盖它们。因此，作为选项2的替代方法，您可以执行以下操作：

    <g id="plane" transform="scale(3, 1.25)" fill="#C3922E">
    <path d="M23.9521429,16.0247273 C24.0607143,15.4996364 22.1314286,9.57454545 22.1728571,9.41454545 C22.4507143,9.21454545 23.6271429,8.10618182 23.6271429,7.93745455 C23.6271429,7.76872727 22.8571429,6.99054545 22.72,7.01090909 C22.5835714,7.032 21.9328571,7.73818182 21.7728571,7.95127273 C21.63,7.95490909 21.26,5.92654545 21.4085714,5.77527273 C21.5578571,5.62327273 23.1907143,4.09963636 24.2078571,3.04290909 C25.0607143,2.15636364 25.2457143,0.761454545 25.1285714,0.641454545 C25.0107143,0.522181818 23.6407143,0.710545455 22.77,1.57890909 C21.7321429,2.61454545 20.2357143,4.27636364 20.0864286,4.42909091 C19.9378571,4.57963636 17.9464286,4.20290909 17.9492857,4.05745455 C18.1592857,3.89381818 18.8528571,3.23272727 18.8721429,3.09309091 C18.8928571,2.95490909 18.1285714,2.16872727 17.9628571,2.16872727 C17.7964286,2.16872727 16.7092857,3.36654545 16.5114286,3.64945455 C16.3542857,3.69236364 10.535,1.728 10.02,1.83927273 C9.505,1.94909091 8.88857143,2.42836364 9.02785714,2.57018182 C9.16714286,2.71127273 13.6592857,4.76872727 14.44,5.27054545 C15.22,5.77309091 16.7171429,7.23927273 16.7171429,7.41672727 C16.7171429,7.59490909 12.7042857,12.1796364 12.4707143,12.3730909 C12.2371429,12.5658182 10.5071429,11.7127273 9.83571429,11.808 C9.16357143,11.9025455 8.64428571,12.408 8.68642857,12.5665455 C8.72857143,12.7243636 11.3271429,13.9047273 11.1978571,14.1330909 C11.0971429,14.3098182 10.3671429,15.5018182 10.4507143,15.5869091 C10.5342857,15.6712727 11.7057143,14.9287273 11.8792857,14.8261818 C12.1042857,14.6930909 13.2635714,17.3410909 13.4178571,17.384 C13.5728571,17.4261818 14.07,16.8967273 14.1621429,16.2130909 C14.2557143,15.5287273 13.4178571,13.768 13.6078571,13.5301818 C13.7971429,13.2923636 18.3,9.20654545 18.4757143,9.20654545 C18.6507143,9.20654545 20.09,10.7301818 20.5828571,11.5250909 C21.0764286,12.3192727 23.0964286,16.8930909 23.2357143,17.0349091 C23.3735714,17.1774545 23.8428571,16.5483636 23.9521429,16.0247273 L23.9521429,20.0247273 Z" id="Shape"></path>
    <path xmlns="http://www.w3.org/2000/svg" d="M1.81642857,25.7505455 C2.30571429,24.7767273 2.87714286,23.8269091 3.49642857,22.8974545 C3.81142857,22.4363636 4.13428571,21.9774545 4.47428571,21.5294545 L4.72714286,21.192 L4.98785714,20.8589091 C5.16071429,20.6356364 5.34071429,20.4181818 5.52071429,20.1992727 C5.88142857,19.7636364 6.25214286,19.3352727 6.63071429,18.912 C6.82,18.7010909 7.01214286,18.4989091 7.20214286,18.2909091 L7.80357143,17.6661818 L8.4,17.0705455 C8.60571429,16.8749091 8.80785714,16.6756364 9.015,16.4829091 C9.43071429,16.0989091 9.85,15.7185455 10.2785714,15.3512727 C10.2814286,15.3483636 10.2835714,15.3469091 10.2871429,15.3447273 C10.4628571,15.032 10.65,14.7229091 10.6971429,14.64 C10.7557143,14.5352727 10.2542857,14.2370909 9.685,13.9265455 C9.57214286,14.0181818 9.45928571,14.1112727 9.34642857,14.2036364 C9.11785714,14.3883636 8.89714286,14.5825455 8.67357143,14.7745455 C8.45,14.9665455 8.23571429,15.1687273 8.01642857,15.3658182 C7.79928571,15.5643636 7.58714286,15.7709091 7.37285714,15.9730909 L6.73714286,16.6007273 L6.13642857,17.2305455 C5.93571429,17.4516364 5.73071429,17.6698182 5.53428571,17.8909091 C5.14285714,18.3338182 4.75785714,18.7825455 4.39214286,19.2458182 C4.20857143,19.4763636 4.025,19.7083636 3.84928571,19.944 L3.58285714,20.2974545 L3.32428571,20.6552727 C2.98,21.1323636 2.65857143,21.6247273 2.34285714,22.1192727 C2.19,22.3694545 2.03428571,22.6181818 1.88714286,22.8698182 C1.74285714,23.1272727 1.59571429,23.3789091 1.46071429,23.6378182 C1.18142857,24.1490909 0.927857143,24.6741818 0.69,25.2014545 C0.473571429,25.7054545 0.272142857,26.2123636 0.0971428571,26.7287273 C0.385,27.0487273 0.685714286,27.3570909 0.992857143,27.6581818 C1.045,27.5149091 1.09428571,27.3701818 1.14928571,27.2261818 C1.34571429,26.7287273 1.575,26.2385455 1.81642857,25.7505455 L1.81642857,25.7505455 Z" id="Shape"/>
    <path xmlns="http://www.w3.org/2000/svg" d="M2.61857143,28.7214545 C2.81428571,28.2232727 3.04357143,27.7330909 3.285,27.2458182 C3.77428571,26.272 4.34571429,25.3214545 4.96571429,24.3927273 C5.28,23.9316364 5.60285714,23.4727273 5.94357143,23.024 L6.19714286,22.6865455 L6.45785714,22.3541818 C6.63,22.1301818 6.81,21.912 6.99071429,21.6938182 C7.35142857,21.2581818 7.72214286,20.8298182 8.10071429,20.4065455 C8.28928571,20.1956364 8.48142857,19.9941818 8.67214286,19.7861818 L9.27428571,19.1614545 L9.87,18.5650909 C10.075,18.3694545 10.2778571,18.1709091 10.485,17.9774545 C10.9007143,17.5941818 11.32,17.2130909 11.7478571,16.8458182 C11.8821429,16.7309091 12.0171429,16.6167273 12.1528571,16.5032727 C11.8235714,15.8690909 11.49,15.2690909 11.3792857,15.3330909 C11.3185714,15.3694545 11.135,15.4843636 10.9185714,15.6145455 C10.8842857,15.6429091 10.85,15.6698182 10.815,15.6989091 C10.5857143,15.8829091 10.3657143,16.0778182 10.1414286,16.2698182 C9.91785714,16.4618182 9.70357143,16.664 9.48428571,16.8603636 C9.26642857,17.0596364 9.055,17.2661818 8.84071429,17.4683636 L8.205,18.0967273 L7.60428571,18.7265455 C7.40357143,18.9469091 7.19857143,19.1658182 7.00214286,19.3869091 C6.61071429,19.8298182 6.22571429,20.2785455 5.86,20.7410909 C5.67642857,20.9723636 5.49285714,21.2029091 5.31714286,21.4392727 L5.05142857,21.7927273 L4.79285714,22.1512727 C4.44928571,22.6283636 4.12642857,23.1207273 3.81142857,23.6145455 C3.65928571,23.8654545 3.50357143,24.1127273 3.35642857,24.3658182 C3.21214286,24.6210909 3.06428571,24.872 2.93,25.1309091 C2.65071429,25.6421818 2.39785714,26.1672727 2.16,26.6945455 C1.94642857,27.1927273 1.74642857,27.6938182 1.57357143,28.2029091 C1.87928571,28.48 2.19428571,28.7447273 2.51714286,29.0014545 C2.55071429,28.9090909 2.58214286,28.8145455 2.61857143,28.7214545 L2.61857143,28.7214545 Z" id="Shape"/>
    <animateTransform
       attributeName="transform"
       id="plane"
       type="translate"
       from="15 40"
       to="45 8"
       dur="2s"
       begin="0s"
       fill="freeze"
       repeatCount="indefinite"
       additive="sum"
    />

  </g>

PS。我的例子显然看起来并不完美，我把它们留给你解决，因为你知道你想要什么。：）

如何增加作为路径的SVG中的平面大小

1 个答案: