2

我正在尝试使用 Svg 图形，我遇到了这个挑战。无法弄清楚此图像裁剪且无法缩放的原因。

SVG代码是

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path class="st0" d="M143.5 69c-2.6-1-5.5 0.2-6.5 2.7 -2.2 5.4-1.7 10.4-1 13.4l-42.4 51.1 -53.2-15.8c-1-0.5-6.2-3.6-6.2-11.6 0-2.5 0.4-5.8 2.3-7.3 2.2-1.7 6-0.9 6-0.9 0.2 0.1 0.5 0.1 0.7 0.1l47.3 13.5c0.4 0.1 0.9 0.2 1.3 0.2 1.5 0 2.9-0.7 3.8-1.8l50.1-57.7c1.1-1.3 1.4-3.1 0.8-4.8 -0.6-1.6-1.9-2.8-3.6-3.2L84.2 33.8c-1.8-0.4-3.6 0.2-4.8 1.6L30.5 89.8c-0.9 1.1-3.3 4.8-4.6 9.8 -1.1 2.6-1.7 5.7-1.7 9.3 0 15.3 12 20.6 12.5 20.8 0.2 0.1 0.4 0.1 0.5 0.2L94 146.8c0.5 0.1 0.9 0.2 1.4 0.2 1.5 0 2.9-0.6 3.8-1.8l46.3-55.7c1.2-1.5 1.5-3.5 0.7-5.3 0 0-1.7-4.2 0.1-8.7C147.3 72.9 146.1 70 143.5 69zM73.8 58.4l3.8-4.5c1-1.2 3.5-1.8 5.4-1.4l35.1 8.5c1.9 0.5 2.7 1.9 1.6 3.1l-3.8 4.5c-1 1.2-3.5 1.9-5.4 1.4l-35.1-8.6C73.5 61 72.8 59.7 73.8 58.4z"/></svg>

文件结构是

<div id="bigBook" >
</div>

<div id="bigBook" class="smallBook">
</div>

CSS是

.st0{fill: #333333;}

.smallBook{ transform: scale(0);}

#bigBook{
height: 175px; width: 175px;
background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTQzLjUgNjljLTIuNi0xLTUuNSAwLjItNi41IDIuNyAtMi4yIDUuNC0xLjcgMTAuNC0xIDEzLjRsLTQyLjQgNTEuMSAtNTMuMi0xNS44Yy0xLTAuNS02LjItMy42LTYuMi0xMS42IDAtMi41IDAuNC01LjggMi4zLTcuMyAyLjItMS43IDYtMC45IDYtMC45IDAuMiAwLjEgMC41IDAuMSAwLjcgMC4xbDQ3LjMgMTMuNWMwLjQgMC4xIDAuOSAwLjIgMS4zIDAuMiAxLjUgMCAyLjktMC43IDMuOC0xLjhsNTAuMS01Ny43YzEuMS0xLjMgMS40LTMuMSAwLjgtNC44IC0wLjYtMS42LTEuOS0yLjgtMy42LTMuMkw4NC4yIDMzLjhjLTEuOC0wLjQtMy42IDAuMi00LjggMS42TDMwLjUgODkuOGMtMC45IDEuMS0zLjMgNC44LTQuNiA5LjggLTEuMSAyLjYtMS43IDUuNy0xLjcgOS4zIDAgMTUuMyAxMiAyMC42IDEyLjUgMjAuOCAwLjIgMC4xIDAuNCAwLjEgMC41IDAuMkw5NCAxNDYuOGMwLjUgMC4xIDAuOSAwLjIgMS40IDAuMiAxLjUgMCAyLjktMC42IDMuOC0xLjhsNDYuMy01NS43YzEuMi0xLjUgMS41LTMuNSAwLjctNS4zIDAgMC0xLjctNC4yIDAuMS04LjdDMTQ3LjMgNzIuOSAxNDYuMSA3MCAxNDMuNSA2OXpNNzMuOCA1OC40bDMuOC00LjVjMS0xLjIgMy41LTEuOCA1LjQtMS40bDM1LjEgOC41YzEuOSAwLjUgMi43IDEuOSAxLjYgMy4xbC0zLjggNC41Yy0xIDEuMi0zLjUgMS45LTUuNCAxLjRsLTM1LjEtOC42QzczLjUgNjEgNzIuOCA1OS43IDczLjggNTguNHoiLz48L2c+Cjwvc3ZnPg==) no-repeat center center;
}
4

0 回答 0