2017-02-28 5 views
0

画像の位置を変えずにSVGオブジェクトのパディング(特に左右)を設定することはできますか?で
「パディング:0」のベクトルが中心に:私は0とは異なる値にパディングを設定するとすぐにHTML - 移動せずにベクターのパディングを変更する

body { 
 
\t overflow-x: hidden; 
 
\t overflow-y: hidden; 
 
\t 
 
\t margin-left: 0; 
 
\t margin-top: 0; 
 
\t margin-right: 0; 
 
\t margin-bottom: 0; 
 
\t 
 
\t padding: 0; 
 
\t 
 
\t width: 100%; 
 
} 
 

 
svg { 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t height: 100%; 
 
\t width: 100%; 
 
}
\t <body> 
 
\t \t <svg width="512pt" height="512pt" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
\t \t \t <g id="#231f20ff"> 
 
\t \t \t \t <path fill="#231f20" opacity="1.00" d=" M 233.53 36.81 C 272.28 32.86 312.05 39.30 347.45 55.59 C 405.05 81.71 450.23 133.75 467.57 194.62 C 481.09 240.80 478.82 291.41 461.18 336.18 C 448.25 369.26 427.13 399.06 400.30 422.31 C 370.62 448.21 333.86 465.92 295.06 472.82 C 238.24 483.30 177.49 470.11 130.26 436.78 C 103.34 418.03 80.65 393.21 64.43 364.68 C 46.45 333.21 36.53 297.21 35.77 260.98 C 34.70 217.81 46.74 174.41 70.02 138.04 C 89.46 107.45 116.54 81.77 148.11 63.98 C 174.30 49.16 203.60 39.90 233.53 36.81 M 244.22 52.17 C 192.83 54.90 143.03 78.39 107.86 115.86 C 83.83 141.03 66.68 172.52 58.00 206.18 C 47.74 246.93 50.24 290.96 65.89 330.02 C 81.45 370.25 110.30 405.19 146.74 428.24 C 162.88 438.69 180.65 446.39 198.98 452.06 C 229.29 460.92 261.67 462.52 292.73 456.85 C 348.47 446.71 399.28 412.22 429.01 363.97 C 452.34 327.12 463.25 282.59 459.47 239.11 C 454.88 180.74 423.44 125.17 375.89 91.05 C 338.30 63.32 290.87 49.27 244.22 52.17 Z" /> 
 
\t \t \t </g> 
 
\t \t </svg> 
 
\t </body>

しかし、それの位置が変更されます。

私は

body { 
 
\t overflow-x: hidden; 
 
\t overflow-y: hidden; 
 
\t 
 
\t margin-left: 0; 
 
\t margin-top: 0; 
 
\t margin-right: 0; 
 
\t margin-bottom: 0; 
 
\t 
 
\t padding: 0; 
 
\t 
 
\t width: 100%; 
 
} 
 

 
svg { 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t height: 100%; 
 
\t width: 100%; 
 
    padding-left: 20%; 
 
}
<body> 
 
\t \t <svg width="512pt" height="512pt" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
\t \t \t <g id="#231f20ff"> 
 
\t \t \t \t <path fill="#231f20" opacity="1.00" d=" M 233.53 36.81 C 272.28 32.86 312.05 39.30 347.45 55.59 C 405.05 81.71 450.23 133.75 467.57 194.62 C 481.09 240.80 478.82 291.41 461.18 336.18 C 448.25 369.26 427.13 399.06 400.30 422.31 C 370.62 448.21 333.86 465.92 295.06 472.82 C 238.24 483.30 177.49 470.11 130.26 436.78 C 103.34 418.03 80.65 393.21 64.43 364.68 C 46.45 333.21 36.53 297.21 35.77 260.98 C 34.70 217.81 46.74 174.41 70.02 138.04 C 89.46 107.45 116.54 81.77 148.11 63.98 C 174.30 49.16 203.60 39.90 233.53 36.81 M 244.22 52.17 C 192.83 54.90 143.03 78.39 107.86 115.86 C 83.83 141.03 66.68 172.52 58.00 206.18 C 47.74 246.93 50.24 290.96 65.89 330.02 C 81.45 370.25 110.30 405.19 146.74 428.24 C 162.88 438.69 180.65 446.39 198.98 452.06 C 229.29 460.92 261.67 462.52 292.73 456.85 C 348.47 446.71 399.28 412.22 429.01 363.97 C 452.34 327.12 463.25 282.59 459.47 239.11 C 454.88 180.74 423.44 125.17 375.89 91.05 C 338.30 63.32 290.87 49.27 244.22 52.17 Z" /> 
 
\t \t \t </g> 
 
\t \t </svg> 
 
\t </body>

SVGオブジェクトの内部コンテンツを大きくして、アニメーション中のオーバーフローを防止します。

答えて

0

leftを使用すると、パディングの位置の変化を相殺できます。

body { 
 
\t overflow-x: hidden; 
 
\t overflow-y: hidden; 
 
\t 
 
\t margin-left: 0; 
 
\t margin-top: 0; 
 
\t margin-right: 0; 
 
\t margin-bottom: 0; 
 
\t 
 
\t padding: 0; 
 
\t 
 
\t width: 100%; 
 
} 
 

 
svg { 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: -20%; 
 
\t height: 100%; 
 
\t width: 100%; 
 
    padding-left: 20%; 
 
}
<body> 
 
\t \t <svg width="512pt" height="512pt" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
\t \t \t <g id="#231f20ff"> 
 
\t \t \t \t <path fill="#231f20" opacity="1.00" d=" M 233.53 36.81 C 272.28 32.86 312.05 39.30 347.45 55.59 C 405.05 81.71 450.23 133.75 467.57 194.62 C 481.09 240.80 478.82 291.41 461.18 336.18 C 448.25 369.26 427.13 399.06 400.30 422.31 C 370.62 448.21 333.86 465.92 295.06 472.82 C 238.24 483.30 177.49 470.11 130.26 436.78 C 103.34 418.03 80.65 393.21 64.43 364.68 C 46.45 333.21 36.53 297.21 35.77 260.98 C 34.70 217.81 46.74 174.41 70.02 138.04 C 89.46 107.45 116.54 81.77 148.11 63.98 C 174.30 49.16 203.60 39.90 233.53 36.81 M 244.22 52.17 C 192.83 54.90 143.03 78.39 107.86 115.86 C 83.83 141.03 66.68 172.52 58.00 206.18 C 47.74 246.93 50.24 290.96 65.89 330.02 C 81.45 370.25 110.30 405.19 146.74 428.24 C 162.88 438.69 180.65 446.39 198.98 452.06 C 229.29 460.92 261.67 462.52 292.73 456.85 C 348.47 446.71 399.28 412.22 429.01 363.97 C 452.34 327.12 463.25 282.59 459.47 239.11 C 454.88 180.74 423.44 125.17 375.89 91.05 C 338.30 63.32 290.87 49.27 244.22 52.17 Z" /> 
 
\t \t \t </g> 
 
\t \t </svg> 
 
\t </body>

+0

パーフェクト、ありがとうございました! – werck

関連する問題