изменение размеров элемента svg-объекта

Question

Код с анимацией (элемент приводится к исходным размерам):

@keyframes leftDoorCoupe{
from{
    transform: translateX(0);
}
50%{
    transform: translateX(36px);
}
to{
    transform: translateX(0);
}
}

#g869{
animation-name: leftDoorCoupe;
animation-duration: 4s;
animation-iteration-count: infinite;
}

<svg
width="90.971mm"
height="111.14mm"
version="1.1"
viewBox="0 0 90.971 111.14"
id="svg893">

<defs
id="defs849">
<linearGradient
    id="linearGradient153800">
<stop
    stop-color="#ececec"
    offset="0"
    id="stop835" />
<stop
    stop-color="#e6e6e6"
    offset="1"
    id="stop837" />
</linearGradient>
<linearGradient
    id="linearGradient138356">
<stop
    stop-color="#b3b3b3"
    offset="0"
    id="stop840" />
<stop
    stop-color="#ececec"
    offset="1"
    id="stop842" />
</linearGradient>
<radialGradient
    id="radialGradient151593"
    cx="116.64"
    cy="159.61"
    r="29.903"
    gradientTransform="matrix(.040712 .089967 -.024581 .13414 -30.682 -90.817)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient138356" />
<radialGradient
    id="radialGradient151654"
    cx="116.64"
    cy="159.61"
    r="29.903"
    gradientTransform="matrix(.040712 .089967 -.024581 .13414 -63.038 -90.817)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient138356" />
<radialGradient
    id="radialGradient153802"
    cx="55.211"
    cy="149.08"
    r="15.179"
    gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -60.939 -433.28)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient153800" />
<radialGradient
    id="radialGradient155758"
    cx="55.211"
    cy="149.08"
    r="15.179"
    gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -6.4285 -433.28)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient153800" />
</defs>
<g
transform="matrix(1.5997 0 0 .99864 -4.8715 .075462)"
stroke-linejoin="round"
id="g869">
<rect
    x="8.2399998"
    y="6.3652"
    width="23.720072"
    height="98.378998"
    fill="#ffe7e7"
    stroke="#000006"
    stroke-opacity="0.78544"
    stroke-width="0.50626"
    id="rect863" />
<rect
    transform="scale(-1)"
    x="-30.615"
    y="-63.247"
    width="1.8642"
    height="8.3405"
    fill="url(#radialGradient151593)"
    stroke="#8a6e3e"
    stroke-linecap="round"
    stroke-width=".28402"
    id="rect865" />
<rect
    x="10.144"
    y="9.4162"
    width="16.677"
    height="91.081"
    fill="url(#radialGradient153802)"
    stroke="#8a6e3e"
    stroke-linecap="round"
    stroke-width=".80874"
    id="rect867" />
</g>
</svg>

Здесь как должно выглядеть (без анимации):

<svg
width="90.971mm"
height="111.14mm"
version="1.1"
viewBox="0 0 90.971 111.14"
id="svg893">

<defs
id="defs849">
<linearGradient
    id="linearGradient153800">
<stop
    stop-color="#ececec"
    offset="0"
    id="stop835" />
<stop
    stop-color="#e6e6e6"
    offset="1"
    id="stop837" />
</linearGradient>
<linearGradient
    id="linearGradient138356">
<stop
    stop-color="#b3b3b3"
    offset="0"
    id="stop840" />
<stop
    stop-color="#ececec"
    offset="1"
    id="stop842" />
</linearGradient>
<radialGradient
    id="radialGradient151593"
    cx="116.64"
    cy="159.61"
    r="29.903"
    gradientTransform="matrix(.040712 .089967 -.024581 .13414 -30.682 -90.817)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient138356" />
<radialGradient
    id="radialGradient151654"
    cx="116.64"
    cy="159.61"
    r="29.903"
    gradientTransform="matrix(.040712 .089967 -.024581 .13414 -63.038 -90.817)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient138356" />
<radialGradient
    id="radialGradient153802"
    cx="55.211"
    cy="149.08"
    r="15.179"
    gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -60.939 -433.28)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient153800" />
<radialGradient
    id="radialGradient155758"
    cx="55.211"
    cy="149.08"
    r="15.179"
    gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -6.4285 -433.28)"
    gradientUnits="userSpaceOnUse"
    xlink:href="#linearGradient153800" />
</defs>
<g
transform="matrix(1.5997 0 0 .99864 -4.8715 .075462)"
stroke-linejoin="round"
id="g869">
<rect
    x="8.2399998"
    y="6.3652"
    width="23.720072"
    height="98.378998"
    fill="#ffe7e7"
    stroke="#000006"
    stroke-opacity="0.78544"
    stroke-width="0.50626"
    id="rect863" />
<rect
    transform="scale(-1)"
    x="-30.615"
    y="-63.247"
    width="1.8642"
    height="8.3405"
    fill="url(#radialGradient151593)"
    stroke="#8a6e3e"
    stroke-linecap="round"
    stroke-width=".28402"
    id="rect865" />
<rect
    x="10.144"
    y="9.4162"
    width="16.677"
    height="91.081"
    fill="url(#radialGradient153802)"
    stroke="#8a6e3e"
    stroke-linecap="round"
    stroke-width=".80874"
    id="rect867" />
</g>
</svg>

Проблема следующая, элемент #g869 был не отрисован вручную, а создан посредством растягивания другого элемента до некоторой величины (работаю в Inkscape). Если данный элемент статичен, он отображается как положено, но если написать для него keyframes (функция приведена в коде), элемент возвращается к величине элемента-исходника. Элемент-исходник: https://codepen.io/j_a_c_k_hammer/pen/oNwgGaZ. С чем связана проблема и как ее решить?

Answer 1

Пока получилось только с помощью повторения на каждой стадии анимации scale(1.6,1)<--- округлил отсюда: "matrix(1.5997 0 0 .99864 -4.8715 .075462)".

@keyframes leftDoorCoupe{
from{
    transform: translateX(0) scale(1.6,1);
}
50%{
    transform: translateX(36px) scale(1.6,1);
}
to{
    transform: translateX(0) scale(1.6,1);
}
}

#g869{
animation-name: leftDoorCoupe;
animation-duration: 4s;
animation-iteration-count: infinite;
}

<svg
 width="90.971mm"
 height="111.14mm"
 version="1.1"
 viewBox="0 0 90.971 111.14"
 id="svg893">

<defs
   id="defs849">
  <linearGradient
     id="linearGradient153800">
    <stop
       stop-color="#ececec"
       offset="0"
       id="stop835" />
    <stop
       stop-color="#e6e6e6"
       offset="1"
       id="stop837" />
  </linearGradient>
  <linearGradient
     id="linearGradient138356">
    <stop
       stop-color="#b3b3b3"
       offset="0"
       id="stop840" />
    <stop
       stop-color="#ececec"
       offset="1"
       id="stop842" />
  </linearGradient>
  <radialGradient
     id="radialGradient151593"
     cx="116.64"
     cy="159.61"
     r="29.903"
     gradientTransform="matrix(.040712 .089967 -.024581 .13414 -30.682 -90.817)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient138356" />
  <radialGradient
     id="radialGradient151654"
     cx="116.64"
     cy="159.61"
     r="29.903"
     gradientTransform="matrix(.040712 .089967 -.024581 .13414 -63.038 -90.817)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient138356" />
  <radialGradient
     id="radialGradient153802"
     cx="55.211"
     cy="149.08"
     r="15.179"
     gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -60.939 -433.28)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient153800" />
  <radialGradient
     id="radialGradient155758"
     cx="55.211"
     cy="149.08"
     r="15.179"
     gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -6.4285 -433.28)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient153800" />
</defs>
<g
   transform="matrix(1.5997 0 0 .99864 -4.8715 .075462)"
   stroke-linejoin="round"
   id="g869">
  <rect
     x="8.2399998"
     y="6.3652"
     width="23.720072"
     height="98.378998"
     fill="#ffe7e7"
     stroke="#000006"
     stroke-opacity="0.78544"
     stroke-width="0.50626"
     id="rect863" />
  <rect
     transform="scale(-1)"
     x="-30.615"
     y="-63.247"
     width="1.8642"
     height="8.3405"
     fill="url(#radialGradient151593)"
     stroke="#8a6e3e"
     stroke-linecap="round"
     stroke-width=".28402"
     id="rect865" />
  <rect
     x="10.144"
     y="9.4162"
     width="16.677"
     height="91.081"
     fill="url(#radialGradient153802)"
     stroke="#8a6e3e"
     stroke-linecap="round"
     stroke-width=".80874"
     id="rect867" />
</g>

Или прописать transform="scale(1.6,1)" всем элементам двери в отдельности.

@keyframes leftDoorCoupe{
from{
    transform: translateX(0);
}
50%{
    transform: translateX(36px);
}
to{
    transform: translateX(0);
}
}

#g869{
animation-name: leftDoorCoupe;
animation-duration: 4s;
animation-iteration-count: infinite;
}

<svg
 width="90.971mm"
 height="111.14mm"
 version="1.1"
 viewBox="0 0 90.971 111.14"
 id="svg893">

<defs
   id="defs849">
  <linearGradient
     id="linearGradient153800">
    <stop
       stop-color="#ececec"
       offset="0"
       id="stop835" />
    <stop
       stop-color="#e6e6e6"
       offset="1"
       id="stop837" />
  </linearGradient>
  <linearGradient
     id="linearGradient138356">
    <stop
       stop-color="#b3b3b3"
       offset="0"
       id="stop840" />
    <stop
       stop-color="#ececec"
       offset="1"
       id="stop842" />
  </linearGradient>
  <radialGradient
     id="radialGradient151593"
     cx="116.64"
     cy="159.61"
     r="29.903"
     gradientTransform="matrix(.040712 .089967 -.024581 .13414 -30.682 -90.817)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient138356" />
  <radialGradient
     id="radialGradient151654"
     cx="116.64"
     cy="159.61"
     r="29.903"
     gradientTransform="matrix(.040712 .089967 -.024581 .13414 -63.038 -90.817)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient138356" />
  <radialGradient
     id="radialGradient153802"
     cx="55.211"
     cy="149.08"
     r="15.179"
     gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -60.939 -433.28)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient153800" />
  <radialGradient
     id="radialGradient155758"
     cx="55.211"
     cy="149.08"
     r="15.179"
     gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -6.4285 -433.28)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient153800" />
</defs>
<g
   transform="matrix(1 0 0 1 -4.8715 .075462)"
   stroke-linejoin="round"
   id="g869">
  <rect
     x="8.2399998"
     y="6.3652"
     width="23.720072"
     height="98.378998"
     fill="#ffe7e7"
     stroke="#000006"
     stroke-opacity="0.78544"
     stroke-width="0.50626"
     transform="scale(1.6,1)"
     id="rect863" />
  <rect
     transform="scale(-1.6,-1)"
     x="-30.615"
     y="-63.247"
     width="1.8642"
     height="8.3405"
     fill="url(#radialGradient151593)"
     stroke="#8a6e3e"
     stroke-linecap="round"
     stroke-width=".28402"
     id="rect865" />
  <rect
     x="10.144"
     y="9.4162"
     transform="scale(1.6,1)"
     width="16.677"
     height="91.081"
     fill="url(#radialGradient153802)"
     stroke="#8a6e3e"
     stroke-linecap="round"
     stroke-width=".80874"
     id="rect867" />
</g>

Или вложить элементы в другую группу, которой задать вашу матрицу трансформаций, тогда они не будут меняться.

@keyframes leftDoorCoupe{
from{
    transform: translateX(0);
}
50%{
    transform: translateX(36px);
}
to{
    transform: translateX(0);
}
}

#g869{
animation-name: leftDoorCoupe;
animation-duration: 4s;
animation-iteration-count: infinite;
}

<svg
 width="90.971mm"
 height="111.14mm"
 version="1.1"
 viewBox="0 0 90.971 111.14"
 id="svg893">

<defs
   id="defs849">
  <linearGradient
     id="linearGradient153800">
    <stop
       stop-color="#ececec"
       offset="0"
       id="stop835" />
    <stop
       stop-color="#e6e6e6"
       offset="1"
       id="stop837" />
  </linearGradient>
  <linearGradient
     id="linearGradient138356">
    <stop
       stop-color="#b3b3b3"
       offset="0"
       id="stop840" />
    <stop
       stop-color="#ececec"
       offset="1"
       id="stop842" />
  </linearGradient>
  <radialGradient
     id="radialGradient151593"
     cx="116.64"
     cy="159.61"
     r="29.903"
     gradientTransform="matrix(.040712 .089967 -.024581 .13414 -30.682 -90.817)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient138356" />
  <radialGradient
     id="radialGradient151654"
     cx="116.64"
     cy="159.61"
     r="29.903"
     gradientTransform="matrix(.040712 .089967 -.024581 .13414 -63.038 -90.817)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient138356" />
  <radialGradient
     id="radialGradient153802"
     cx="55.211"
     cy="149.08"
     r="15.179"
     gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -60.939 -433.28)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient153800" />
  <radialGradient
     id="radialGradient155758"
     cx="55.211"
     cy="149.08"
     r="15.179"
     gradientTransform="matrix(1.3499 -.0083552 .032795 3.2953 -6.4285 -433.28)"
     gradientUnits="userSpaceOnUse"
     xlink:href="#linearGradient153800" />
</defs>
<g
   stroke-linejoin="round"
   id="g869">
    <g transform="matrix(1.5997 0 0 .99864 -4.8715 .075462)"> 
        <rect
            x="8.2399998"
            y="6.3652"
            width="23.720072"
            height="98.378998"
            fill="#ffe7e7"
            stroke="#000006"
            stroke-opacity="0.78544"
            stroke-width="0.50626"
            id="rect863" />
        <rect
            transform="scale(-1)"
            x="-30.615"
            y="-63.247"
            width="1.8642"
            height="8.3405"
            fill="url(#radialGradient151593)"
            stroke="#8a6e3e"
            stroke-linecap="round"
            stroke-width=".28402"
            id="rect865" />
        <rect
            x="10.144"
            y="9.4162"
            width="16.677"
            height="91.081"
            fill="url(#radialGradient153802)"
            stroke="#8a6e3e"
            stroke-linecap="round"
            stroke-width=".80874"
            id="rect867" />
    </g>
</g>

БЛОГ НА HUSL

изменение размеров элемента svg-объекта

Ответы (1 шт):