我在slick.js个旋转木马上有svg图像的一些自举卡,在svg代码上,我设置了width="15"
,height="17"
和viewBox="0 0 32 32"
,但实际上他们似乎比代码指定的尺寸大:
<div class="card">
<div class="card-body">
<img class="card-img" src="img/c_logo.svg">
<h5 class="card-title">C</h5>
<h6 class="card-subtitle mb-2 text-muted">Programming language</h6>
<p class="card-text">Some stuff about the C language...</p>
<a href="lang/c.html" class="btn btn-primary">Learn C</a>
</div>
</div>
$('.slider').slick({
dots: false,
infinite: false,
speed: 300,
arrows: true,
variableWidth: true
});
<svg viewBox="0 0 32 32" preserveAspectRatio="xMinYMid" width="15" height="17" xmlns="http://www.w3.org/2000/svg">
<style>.st0{fill:#03599c}</style>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="100%" width="100%" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" d="m-99.400002,238.399994c-0.199997,-0.5 -0.5,-0.699997 -0.799995,-0.900009l-19.5,-11.199997c-0.300003,-0.199997 -0.800003,-0.300003 -1.300003,-0.300003s-0.900002,0.100006 -1.300003,0.300003l-19.399994,11.300003c-0.699997,0.399994 -1.199997,1.399994 -1.199997,2.199997l0,22.5c0,0.399994 0.099991,1.100006 0.299988,1.399994c0.200012,0.300018 0.5,0.600006 0.800003,0.800018l19.300003,11c0.300003,0.199982 1,0.5 1.400002,0.5c0.5,0 1.099998,-0.300018 1.400002,-0.400024l19.199997,-11.099976c0.699997,-0.400024 1.199997,-1.400024 1.199997,-2.200012l0,-22.599991c0.100006,0 0.100006,-1 -0.099998,-1.300003zm-21.599998,22.5c3.699997,0 6.900002,-2 8.599998,-5l5.200005,3.100006c-2.700005,4.799988 -7.900002,8 -13.800003,8c-8.800003,0 -16,-7.200012 -16,-16.000015s7.199997,-16 16,-16c5.900002,0 11.099998,3.300003 13.900002,8.100006l-5.300003,3c-1.699997,-3 -4.900002,-5.100006 -8.599998,-5.100006c-5.5,0 -9.899994,4.400009 -9.899994,9.900009s4.499992,10 9.899994,10z" class="st0"/>
<style>.st0{fill:#03599c}</style>
<g id="svg_7">
<path id="svg_6" d="m14.716658,4.300003c-0.066666,-0.166668 -0.16667,-0.233334 -0.266668,-0.300003l-6.499994,-3.733331c-0.1,-0.066666 -0.266669,-0.1 -0.433333,-0.1s-0.3,0.033335 -0.433332,0.1l-6.466658,3.766668c-0.233332,0.133331 -0.399998,0.466663 -0.399998,0.73333l0,7.499986c0,0.133331 0.033331,0.366669 0.099997,0.466663c0.066669,0.100006 0.166666,0.200001 0.266666,0.266674l6.433327,3.666675c0.099999,0.066662 0.33333,0.166668 0.466665,0.166668c0.166664,0 0.366666,-0.100006 0.466666,-0.133343l6.399992,-3.7c0.233334,-0.133343 0.400005,-0.466675 0.400005,-0.733337l0,-7.533315c0.033333,0 0.033333,-0.333336 -0.033335,-0.433334zm-7.199995,7.499986c1.23333,0 2.299997,-0.666668 2.866661,-1.666668l1.733334,1.033337c-0.900002,1.599995 -2.633331,2.666664 -4.599995,2.666664c-2.933327,0 -5.333325,-2.400002 -5.333325,-5.333332s2.399998,-5.333326 5.333325,-5.333326c1.966663,0 3.699993,1.100002 4.633327,2.700001l-1.766666,1.000001c-0.566664,-1.000001 -1.633331,-1.700002 -2.866661,-1.700002c-1.833326,0 -3.29999,1.466668 -3.29999,3.299993s1.499996,3.333332 3.29999,3.333332z" class="st0"/>
</g>
</g>
</svg>