svg图片倾斜度

问:
回答:
要将SVG图标倾斜45度，可以使用CSS的transform属性。具体代码如下：

html
<svg t="1693554894929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4945" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" style="transform: rotate(45deg);">
    <path d="M436.790468 965.130894l-0.435745-0.740766c-0.588255-1.024-1.612255-2.331234-2.505532-3.485958l-0.305021-0.501106c-0.457532-0.653617-1.002213-1.350809-1.350808-2.004426l-2.244085-3.246298-0.261447-0.305021-109.916596-169.199659a90.939915 90.939915 0 0 1-13.07234-67.126469 88.761191 88.761191 0 0 1 36.537191-57.017191 84.36017 84.36017 0 0 1 85.405958-6.209362v-282.798298C428.511319 323.322553 465.571404 283.234043 511.106723 283.234043c45.469957 0 82.595404 40.088511 82.595405 89.327659v90.852766a66.233191 66.233191 0 0 1 20.741446-3.377021c21.525787 0 41.875064 10.370723 56.211064 28.27983a69.828085 69.828085 0 0 1 37.670128-11.677958 68.629787 68.629787 0 0 1 42.485106 15.011404c9.477447 7.40766 17.429787 16.994043 23.203405 28.12732 6.710468-2.113362 13.682383-3.268085 20.676085-3.268086 42.37617 0 76.821787 40.088511 76.821787 89.32766v237.655149c0 52.572596-23.246979 110.679149-59.217702 148.109617-20.044255 20.850383-41.613617 32.397617-60.938894 32.397617H516.531745c-44.010213 0-63.771234-32.637277-79.741277-58.869106z m319.335489 14.946042c7.124426 0 24.837447-11.89583 42.201873-38.236596 18.628085-28.43234 29.30383-62.464 29.30383-93.249361V604.138213c0-19.978894-12.331574-37.321532-26.384341-37.321532a18.737021 18.737021 0 0 0-8.889191 2.287659v85.493107h-0.087149c-1.002213 14.336-12.505872 25.447489-26.384341 25.512851-13.922043 0-25.491064-11.329362-26.427915-25.491064h-0.043574V580.411915l-1.590468-20.828596c-1.372596-18.562723-13.246638-33.704851-26.515064-33.704851-5.882553 0-11.917617 3.268085-16.689021 8.714894v92.465021c-0.043574 15.12034-11.89583 27.342979-26.536851 27.386553-14.597447-0.065362-26.427915-12.288-26.47149-27.386553v-81.353532l-1.982638-9.499234c-3.268085-15.817532-14.248851-27.713362-25.425702-27.713362-7.625532 0-15.251064 5.403234-20.414638 14.18349l-0.849703 91.724255v34.489191c0 13.377362-10.610383 24.379915-23.552 24.379915h-5.730042c-13.006979 0-23.573787-11.002553-23.573787-24.379915V373.585702l-0.152511-9.717106c0-20.588936-14.466723-37.25617-32.354043-37.25617-17.865532 0-32.332255 16.710809-32.332255 37.25617l1.154724 267.547234c0.065362 0.806128 0.087149 1.634043 0.087149 2.461957v106.147404c-0.217872 13.660596-10.087489 25.098894-23.181618 26.841873a26.580426 26.580426 0 0 1-28.977021-19.913532l-9.956766-30.001021a36.014298 36.014298 0 0 0-22.985532-15.904681 35.077447 35.077447 0 0 0-27.103319 5.621106c-16.558298 11.50366-20.937532 34.685277-9.84783 51.810043l113.315405 174.145361 0.370383 0.47932 1.394383 2.135149 1.742978 2.679829c1.067574 1.742979 2.222298 3.398809 3.246298 4.684256l0.740766 0.958638 0.544681 1.198298c17.64766 29.151319 24.445277 35.44783 37.844426 35.44783h242.491914v-0.174298 0.043574z" fill="#000000" p-id="4946"></path>
    <path d="M343.148936 359.489362c0 15.033191-12.200851 27.234043-27.234042 27.234042H174.297872a27.234043 27.234043 0 0 1 0-54.468085h141.617022c15.033191 0 27.234043 12.200851 27.234042 27.234043zM887.829787 359.489362c0 15.033191-12.200851 27.234043-27.234042 27.234042H718.978723a27.234043 27.234043 0 0 1 0-54.468085h141.617022c15.033191 0 27.234043 12.200851 27.234042 27.234043zM802.772426 97.824681a27.234043 27.234043 0 0 1 0 38.498042l-118.173958 118.195745a27.234043 27.234043 0 0 1-38.51983-38.51983l118.173958-118.173957a27.234043 27.234043 0 0 1 38.51983 0zM253.908426 97.824681a27.234043 27.234043 0 0 1 38.519829 0l118.173958 118.173957a27.234043 27.234043 0 0 1-38.51983 38.51983L253.908426 136.322723a27.234043 27.234043 0 0 1 0-38.498042zM528.340426 0c15.033191 0 27.234043 12.200851 27.234042 27.234043v141.617021a27.234043 27.234043 0 0 1-54.468085 0v-141.617021C501.106383 12.200851 513.307234 0 528.340426 0z" fill="#000000" p-id="4947"></path>
</svg>
在 <svg> 标签中的 style 属性中，添加了 transform: rotate(45deg); 来使图标旋转45度
图示:
猜你喜欢
