Question 275616 in Html Question posted in
Some basic documentation can be found here.

Html – How to animate a rectangular svg without any of it hidden outside of a container

I have the following:

svg {
  height: 50vh;
}

path {
  transform-origin: 50% 50%;
  animation-duration: 2s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  overflow: visible
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<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"
     viewBox="0 0 844.5 464" style="enable-background:new 0 0 844.5 464;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#931D72;}
</style>
<g>
    <g>
        <g>
            <path class="st0" d="M316.8,316.7c-14.9,16.5-31.2,27-50.5,32.3l-0.2-0.5c-10.9,3.1-22.2,4.7-33.7,4.7
                c-66.9,0-121.2-54.4-121.2-121.2s54.4-121.2,121.2-121.2c34.6,0,66.9,14.5,89.9,39.9l13.1-10.9c-26.3-29.4-63.3-46.1-103-46.1
                c-76.2,0-138.2,62-138.2,138.2s62,138.2,138.2,138.2c40.7,0,70.6-13,97-42.1c25.7-28.4,44.4-68,64.2-109.9
                c15.6-33.1,31.7-67.1,52.3-97.3l0.4,0.3C485,59.6,551.3,22.9,623.6,22.9c59.7,0,116,25.2,155.7,69.5l13.1-10.8
                c-42.9-48.2-104-75.7-168.8-75.7c-67.3,0-121.4,23.5-165.5,71.9c-35.2,38.7-57.9,86.7-79.8,133.2
                C359,251.7,340.8,290.2,316.8,316.7z"/>
            <path class="st0" d="M838.2,284.9c0-39.7-23.7-74-57.6-89.6c-0.8-0.8-1.7-1.4-2.8-1.9c-12-5-24.8-7.5-37.8-7.5
                c-54.7,0-99.2,44.5-99.2,99.2c0,22.2,7.3,43.4,20.8,60.7c-11.8,3.8-24.2,5.9-37,5.9c-66.7,0-120.9-54.3-120.9-120.9
                c0-39.3,18.8-74.2,47.9-96.3c20.2-14.9,45.1-23.8,72-23.8c33.4,0,65,13.7,87.9,37.7l0.9-0.8l12.2-10.1l0.9-0.8
                c-26.1-28-62.4-43.9-100.9-43.9c-10.9,0-21.5,1.3-31.7,3.7c-27.2,5.4-49.7,18.4-69.5,40c-1.8,1.9-3.5,4-5.2,6
                c-1.2,1.5-2.4,2.9-3.6,4.4c-0.5,0.6-0.9,1.2-1.4,1.8c-0.2,0.2-0.3,0.4-0.5,0.6c-19.7,25.7-36.2,59.2-55.1,99
                c-21.1,44.8-43,91-75.7,127.2c-26.2,29-56.4,48.2-91.3,57.9l-0.2-0.6c-18.8,5.4-38.3,8.2-58,8.2c-115.3,0-209.1-93.8-209.1-209.1
                S117.2,22.9,232.5,22.9c61,0,117.9,26,157.7,71.8l13.1-10.8c-43-49.7-104.7-77.9-170.8-77.9C107.8,5.9,6.3,107.3,6.3,232
                s101.4,226.1,226.1,226.1c65.8,0,118.9-23.2,162.1-71c12.2-13.4,22.8-28.1,32.5-43.4c18.1,31.8,43.7,58.8,74.7,78.7
                c36.4,23.4,78.5,35.7,121.9,35.7c91.1,0,172.8-54.2,208.3-138.1l-0.2-0.1C836,308.8,838.2,297,838.2,284.9z M623.6,441.1
                c-40.1,0-79-11.4-112.7-33c-31.4-20.2-56.8-48.2-73.7-81.3c13.2-23.1,24.6-47.3,35.9-71.1c4.1-8.8,8.2-17.3,12.3-25.6
                c0,0.6,0,1.2,0,1.9c0,76.2,62,138.2,138.2,138.2c48.8,0,93-24.9,118.2-66.5l-0.1-0.1c2.8-4.5,5.4-9.1,7.6-14
                c2-4.2,0.2-9.3-4.1-11.3c-4.2-2-9.3-0.2-11.3,4.1c-11.8,24.9-31.6,44.6-55.4,56.5c-13.2-14.9-20.5-34-20.5-54
                c0-44.9,36.6-81.5,81.5-81.5c44.9,0,81.5,36.6,81.5,81.5c0,11.1-2.2,21.9-6.6,32.1c0,0.1-0.1,0.2-0.1,0.3
                C780.8,392.7,706.4,441.1,623.6,441.1z"/>
        </g>
    </g>
</g>
</svg>

When this runs, because the SVG is rectangular, some of the rotation is hidden outside of the container.

How do I keep it all visible as this rectangle rotates?

Tags:

2

Answers


  1. 0

    Instead of animating path, just do your transformation on the svg element. You also need to make sure your parent container is big enough to contain your rotating element so it doesn’t get clipped. Then center it with absolute positioning and translate() in your animation:

    html,
body {
  height: 100%;
}

svg {
  height: 50vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  animation: center-rotate 2s linear infinite;
}

@keyframes center-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
    Login or Signup to reply.
  2. 0

    A quick workaround:
    apply overflow:visible property to your <svg> element.
    The path won’t be cropped but it might collide with surrounding elements.

    As commented by Paulie_D: a cleaner approach is to adjust your viewBox to a square aspect ratio like viewBox="0 0 844.5 844.5".

    Now you need to center your path vertically in the new viewBox.

    You can convert your pathdata to all relative values using a tool like svgPathEditor. Since you’re using only one fill color we can combine both paths to a compound path by concatenating the dattribute values.

    This way we only need to change the first path command to move the complete shape. See also Lea Verou’s post "Convert SVG path to all-relative or all-absolute commands"

    We can calculate the appropriate x and y offsets like so

    let svg = document.querySelector('svg')
let path = svg.querySelector('path')

// get bounding box
let {
  x,
  y,
  width,
  height
} = path.getBBox();
console.log('bbox:', x, y, width, height)

// get svg viewBox
let vB = svg.viewBox.baseVal;

// calculate x/y offsets to center path in viewBox
let offsetY = vB.height / 2 - (y + height / 2)
let offsetX = vB.width / 2 - (x + width / 2)
console.log('offsetX:',offsetX, 'offsetY:', offsetY)
    svg {
  height: 50vh;
  border: 1px solid #ccc;
  overflow: visible
}
    <svg id="svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 844.5 844.5" xml:space="preserve">
<style type="text/css">
    .st0{fill:#931D72;}
</style>
            <path class="st0" d="m 316.8 316.7 c -14.9 16.5 -31.2 27 -50.5 32.3 l -0.2 -0.5 c -10.9 3.1 -22.2 4.7 -33.7 4.7 c -66.9 0 -121.2 -54.4 -121.2 -121.2 s 54.4 -121.2 121.2 -121.2 c 34.6 0 66.9 14.5 89.9 39.9 l 13.1 -10.9 c -26.3 -29.4 -63.3 -46.1 -103 -46.1 c -76.2 0 -138.2 62 -138.2 138.2 s 62 138.2 138.2 138.2 c 40.7 0 70.6 -13 97 -42.1 c 25.7 -28.4 44.4 -68 64.2 -109.9 c 15.6 -33.1 31.7 -67.1 52.3 -97.3 l 0.4 0.3 c 38.7 -61.5 105 -98.2 177.3 -98.2 c 59.7 0 116 25.2 155.7 69.5 l 13.1 -10.8 c -42.9 -48.2 -104 -75.7 -168.8 -75.7 c -67.3 0 -121.4 23.5 -165.5 71.9 c -35.2 38.7 -57.9 86.7 -79.8 133.2 c -19.3 40.7 -37.5 79.2 -61.5 105.7 z m 521.4 -31.8 c 0 -39.7 -23.7 -74 -57.6 -89.6 c -0.8 -0.8 -1.7 -1.4 -2.8 -1.9 c -12 -5 -24.8 -7.5 -37.8 -7.5 c -54.7 0 -99.2 44.5 -99.2 99.2 c 0 22.2 7.3 43.4 20.8 60.7 c -11.8 3.8 -24.2 5.9 -37 5.9 c -66.7 0 -120.9 -54.3 -120.9 -120.9 c 0 -39.3 18.8 -74.2 47.9 -96.3 c 20.2 -14.9 45.1 -23.8 72 -23.8 c 33.4 0 65 13.7 87.9 37.7 l 0.9 -0.8 l 12.2 -10.1 l 0.9 -0.8 c -26.1 -28 -62.4 -43.9 -100.9 -43.9 c -10.9 0 -21.5 1.3 -31.7 3.7 c -27.2 5.4 -49.7 18.4 -69.5 40 c -1.8 1.9 -3.5 4 -5.2 6 c -1.2 1.5 -2.4 2.9 -3.6 4.4 c -0.5 0.6 -0.9 1.2 -1.4 1.8 c -0.2 0.2 -0.3 0.4 -0.5 0.6 c -19.7 25.7 -36.2 59.2 -55.1 99 c -21.1 44.8 -43 91 -75.7 127.2 c -26.2 29 -56.4 48.2 -91.3 57.9 l -0.2 -0.6 c -18.8 5.4 -38.3 8.2 -58 8.2 c -115.3 0 -209.1 -93.8 -209.1 -209.1 s 93.9 -209 209.2 -209 c 61 0 117.9 26 157.7 71.8 l 13.1 -10.8 c -43 -49.7 -104.7 -77.9 -170.8 -77.9 c -124.7 -0.1 -226.2 101.3 -226.2 226 s 101.4 226.1 226.1 226.1 c 65.8 0 118.9 -23.2 162.1 -71 c 12.2 -13.4 22.8 -28.1 32.5 -43.4 c 18.1 31.8 43.7 58.8 74.7 78.7 c 36.4 23.4 78.5 35.7 121.9 35.7 c 91.1 0 172.8 -54.2 208.3 -138.1 l -0.2 -0.1 c 4.3 -11.1 6.5 -22.9 6.5 -35 z m -214.6 156.2 c -40.1 0 -79 -11.4 -112.7 -33 c -31.4 -20.2 -56.8 -48.2 -73.7 -81.3 c 13.2 -23.1 24.6 -47.3 35.9 -71.1 c 4.1 -8.8 8.2 -17.3 12.3 -25.6 c 0 0.6 0 1.2 0 1.9 c 0 76.2 62 138.2 138.2 138.2 c 48.8 0 93 -24.9 118.2 -66.5 l -0.1 -0.1 c 2.8 -4.5 5.4 -9.1 7.6 -14 c 2 -4.2 0.2 -9.3 -4.1 -11.3 c -4.2 -2 -9.3 -0.2 -11.3 4.1 c -11.8 24.9 -31.6 44.6 -55.4 56.5 c -13.2 -14.9 -20.5 -34 -20.5 -54 c 0 -44.9 36.6 -81.5 81.5 -81.5 c 44.9 0 81.5 36.6 81.5 81.5 c 0 11.1 -2.2 21.9 -6.6 32.1 c 0 0.1 -0.1 0.2 -0.1 0.3 c -33.5 75.4 -107.9 123.8 -190.7 123.8 z"/>
  

</svg>

    We get these offset values

    x: 0.000091552734375 , y:190.2499542236328

    Eventually, we change the path’s first (M) command values like so:

    M 316.8 506.95 //(316.7+190.25)

    svg {
  height: 50vh;
  border: 1px solid #ccc;
}

path {
  transform-origin: 50% 50%;
  animation-duration: 2s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
    <svg id="svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 844.5 844.5" xml:space="preserve">
<style type="text/css">
    .st0{fill:#931D72;}
</style>
            <path id="path" class="st0" d="M 316.8 506.95 c -14.9 16.5 -31.2 27 -50.5 32.3 l -0.2 -0.5 c -10.9 3.1 -22.2 4.7 -33.7 4.7 c -66.9 0 -121.2 -54.4 -121.2 -121.2 s 54.4 -121.2 121.2 -121.2 c 34.6 0 66.9 14.5 89.9 39.9 l 13.1 -10.9 c -26.3 -29.4 -63.3 -46.1 -103 -46.1 c -76.2 0 -138.2 62 -138.2 138.2 s 62 138.2 138.2 138.2 c 40.7 0 70.6 -13 97 -42.1 c 25.7 -28.4 44.4 -68 64.2 -109.9 c 15.6 -33.1 31.7 -67.1 52.3 -97.3 l 0.4 0.3 c 38.7 -61.5 105 -98.2 177.3 -98.2 c 59.7 0 116 25.2 155.7 69.5 l 13.1 -10.8 c -42.9 -48.2 -104 -75.7 -168.8 -75.7 c -67.3 0 -121.4 23.5 -165.5 71.9 c -35.2 38.7 -57.9 86.7 -79.8 133.2 c -19.3 40.7 -37.5 79.2 -61.5 105.7 z m 521.4 -31.8 c 0 -39.7 -23.7 -74 -57.6 -89.6 c -0.8 -0.8 -1.7 -1.4 -2.8 -1.9 c -12 -5 -24.8 -7.5 -37.8 -7.5 c -54.7 0 -99.2 44.5 -99.2 99.2 c 0 22.2 7.3 43.4 20.8 60.7 c -11.8 3.8 -24.2 5.9 -37 5.9 c -66.7 0 -120.9 -54.3 -120.9 -120.9 c 0 -39.3 18.8 -74.2 47.9 -96.3 c 20.2 -14.9 45.1 -23.8 72 -23.8 c 33.4 0 65 13.7 87.9 37.7 l 0.9 -0.8 l 12.2 -10.1 l 0.9 -0.8 c -26.1 -28 -62.4 -43.9 -100.9 -43.9 c -10.9 0 -21.5 1.3 -31.7 3.7 c -27.2 5.4 -49.7 18.4 -69.5 40 c -1.8 1.9 -3.5 4 -5.2 6 c -1.2 1.5 -2.4 2.9 -3.6 4.4 c -0.5 0.6 -0.9 1.2 -1.4 1.8 c -0.2 0.2 -0.3 0.4 -0.5 0.6 c -19.7 25.7 -36.2 59.2 -55.1 99 c -21.1 44.8 -43 91 -75.7 127.2 c -26.2 29 -56.4 48.2 -91.3 57.9 l -0.2 -0.6 c -18.8 5.4 -38.3 8.2 -58 8.2 c -115.3 0 -209.1 -93.8 -209.1 -209.1 s 93.9 -209 209.2 -209 c 61 0 117.9 26 157.7 71.8 l 13.1 -10.8 c -43 -49.7 -104.7 -77.9 -170.8 -77.9 c -124.7 -0.1 -226.2 101.3 -226.2 226 s 101.4 226.1 226.1 226.1 c 65.8 0 118.9 -23.2 162.1 -71 c 12.2 -13.4 22.8 -28.1 32.5 -43.4 c 18.1 31.8 43.7 58.8 74.7 78.7 c 36.4 23.4 78.5 35.7 121.9 35.7 c 91.1 0 172.8 -54.2 208.3 -138.1 l -0.2 -0.1 c 4.3 -11.1 6.5 -22.9 6.5 -35 z m -214.6 156.2 c -40.1 0 -79 -11.4 -112.7 -33 c -31.4 -20.2 -56.8 -48.2 -73.7 -81.3 c 13.2 -23.1 24.6 -47.3 35.9 -71.1 c 4.1 -8.8 8.2 -17.3 12.3 -25.6 c 0 0.6 0 1.2 0 1.9 c 0 76.2 62 138.2 138.2 138.2 c 48.8 0 93 -24.9 118.2 -66.5 l -0.1 -0.1 c 2.8 -4.5 5.4 -9.1 7.6 -14 c 2 -4.2 0.2 -9.3 -4.1 -11.3 c -4.2 -2 -9.3 -0.2 -11.3 4.1 c -11.8 24.9 -31.6 44.6 -55.4 56.5 c -13.2 -14.9 -20.5 -34 -20.5 -54 c 0 -44.9 36.6 -81.5 81.5 -81.5 c 44.9 0 81.5 36.6 81.5 81.5 c 0 11.1 -2.2 21.9 -6.6 32.1 c 0 0.1 -0.1 0.2 -0.1 0.3 c -33.5 75.4 -107.9 123.8 -190.7 123.8 z"/>
  
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search