我在代码中包含以下svg
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path fill="#919191" d="m7.294075,23.110188l2.385864,0.023237l-0.083177,10.552679l15.878221,0l0,-10.514505l2.51405,0l0,13.07741l-20.707843,0l0.01289,-13.138815l-0.000005,-0.000006z"/>
<rect fill="#919191" y="29.348862" x="11.184582" height="2.628626" width="12.437938"/>
<rect fill="#a78b68" transform="matrix(0.5395733410304717,0.05172669848399204,-0.05207586478003252,0.5359555264108665,3.6611416648678325,1.4067255727666614) " y="41.524347" x="18.49125" height="5.003923" width="23.066864"/>
<rect fill="#c19653" transform="matrix(0.5216998676238958,0.14625586092278992,-0.1472431193160242,0.5182018938275416,3.6611416648678325,1.4067255727666614) " y="27.438515" x="24.907076" height="5.003923" width="23.066864"/>
<rect fill="#d48c28" transform="matrix(0.4640090244261216,0.2783830739288475,-0.2802622193151353,0.46089786509976993,3.6611416648678325,1.4067255727666614) " y="7.461092" x="30.089396" height="5.003923" width="23.066864"/>
<rect fill="#fe8908" transform="matrix(0.3157222700143304,0.4376935608999602,-0.4406480862019664,0.31360536660688737,3.6611416648678325,1.4067255727666614) " y="-20.343803" x="28.488303" height="5.003923" width="23.066864"/>
<rect fill="#ff7a15" transform="matrix(0.0893402304821676,0.5310828333843179,-0.5346677562821299,0.08874120831524585,3.6611416648678325,1.4067255727666614) " y="-47.045927" x="14.158203" height="5.003923" width="23.066864"/>
</svg>
我将其包含在我的html部分中
<a href="https://stackoverflow.com/users/2249869/userfriendly">
<span class="icon icon--stackoverflow">
{% include icon-stackoverflow.svg %} //this is the above svg
</span>
<span class="username">
{{ include.username }}
</span>
</a>
我的页脚
<div class="footer-col footer-col-2">
<ul class="social-media-list">
{% if site.github_username %}
<li>
{% include icon-github.html username=site.github_username %}
</li>
{% endif %}
{% if site.twitter_username %}
<li>
{% include icon-twitter.html username=site.twitter_username %}
</li>
{% endif %}
{% if site.stackoverflow_username %}
<li>
{% include icon-stackoverflow.html username=site.stackoverflow_username %}
</li>
{% endif %}
</ul>
</div>
这是浏览器中显示的内容:
请注意缺少图像。我知道代码与开头不同。我为同一件事尝试了多种不同的SVG格式。
Codepen中的相同svg显示了所需的结果。
http://codepen.io/anon/pen/MadpgZ
有任何想法吗?先感谢您。
这个问题已经很老了,但是我发现了,而且遇到了同样的问题。我想我甚至使用了完全相同的jekyll主题(重力),因为您的所有代码看起来都完全相同。
问题是您的SVG需要由16乘16变为40乘40。当您调整图标大小时,该图标会自动显示。事实证明,调整SVG的大小比我预期的要痛苦得多。由于jekyll内联SVG,因此很难使用CSS缩放图像。我最终使用inkscape对其进行了缩放。这是缩放到正确数量的SVG。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="16"
height="16"
id="svg3512"
version="1.1"
inkscape:version="0.91 r"
sodipodi:docname="so.svg">
<metadata
id="metadata3532">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3530" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="716"
id="namedview3528"
showgrid="false"
inkscape:zoom="13.375"
inkscape:cx="8.8971963"
inkscape:cy="20"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3512" />
<path
d="m 0.008293,9.3258921 1.5355776,0.011805 -0.053534,5.3604269 10.2194594,0 0,-5.3410357 1.61808,0 0,6.6429117 L 0,16 0.00829,9.3258965 l -3.2e-6,-3.1e-6 z"
id="path3514"
inkscape:connector-curvature="0"
style="fill:#919191" />
<rect
y="12.494941"
x="2.5122814"
height="1.3352591"
width="8.0052414"
id="rect3516"
style="fill:#919191" />
<rect
transform="matrix(0.9971499,0.07544586,-0.12218858,0.9925069,0,0)"
y="9.8704548"
x="3.9171355"
height="1.3725955"
width="8.0334988"
id="rect3518"
style="fill:#a78b68" />
<rect
transform="matrix(0.97638557,0.21603521,-0.33873527,0.94088172,0,0)"
y="6.511641"
x="5.775034"
height="1.399946"
width="7.9325705"
id="rect3520"
style="fill:#c19653" />
<rect
transform="matrix(0.90379955,0.42795605,-0.61032155,0.79215378,0,0)"
y="1.6542813"
x="6.9925656"
height="1.4789127"
width="7.6219997"
id="rect3522"
style="fill:#d48c28" />
<rect
transform="matrix(0.67463587,0.73815069,-0.87187447,0.48972943,0,0)"
y="-6.0284266"
x="5.8885627"
height="1.627701"
width="6.9478498"
id="rect3524"
style="fill:#fe8908" />
<rect
transform="matrix(0.20846184,0.9780305,-0.99152913,0.12988454,0,0)"
y="-14.397026"
x="1.9119557"
height="1.7366618"
width="6.3626075"
id="rect3526"
style="fill:#ff7a15" />
</svg>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句