我遇到某个特定图标无法缩放的问题。如果你转到this plunker，你会看到第一个图标（带有铅笔，画笔和标尺的杯子）不会像页面上的其他每个svg元素一样响应空间。< / p>
我使用save在Illustrator cc18中设计它们以生成svg代码。
对于特定图标，Illustrator会给我这段代码。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="illustration_x5F_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 79 146" style="enable-background:new 0 0 79 146;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<rect id="cup" x="0.6777539" y="67.352684" class="st0" width="77.6444931" height="77.647316"/>
<path id="ruler_x5F_shape" class="st0" d="M47.0672798,19.394165v45.8275757h1.1456909v-1.1456909h4.5957031v1.1456909h12.6415443
V19.394165H47.0672798z M48.2129707,22.8312378h4.5957031v1.1456909h-4.5957031V22.8312378z M48.2129707,27.4140015h4.5957031
v1.1456909h-4.5957031V27.4140015z M48.2129707,31.9967651h4.5957031v1.1456909h-4.5957031V31.9967651z M48.2129707,36.5795288
h4.5957031v1.1456909h-4.5957031V36.5795288z M48.2129707,41.1622925h4.5957031v1.1456909h-4.5957031V41.1622925z
M48.2129707,45.7450562h4.5957031v1.1456909h-4.5957031V45.7450562z M48.2129707,50.3278198h4.5957031v1.1456909h-4.5957031
V50.3278198z M48.2129707,54.9105835h4.5957031v1.1456909h-4.5957031V54.9105835z M48.2129707,59.4932861h4.5957031v1.1456909
h-4.5957031V59.4932861z M57.404438,62.9303589h-9.1914673V61.784668h9.1914673V62.9303589z M57.404438,58.3475952h-9.1914673
v-1.1456909h9.1914673V58.3475952z M57.404438,53.7648926h-9.1914673v-1.1456909h9.1914673V53.7648926z M57.404438,49.1821289
h-9.1914673V48.036438h9.1914673V49.1821289z M57.404438,44.5993652h-9.1914673v-1.1456909h9.1914673V44.5993652z
M57.404438,40.0166016h-9.1914673v-1.1456909h9.1914673V40.0166016z M57.404438,35.4338379h-9.1914673V34.288147h9.1914673
V35.4338379z M57.404438,30.8510742h-9.1914673v-1.1456909h9.1914673V30.8510742z M57.404438,26.2683105h-9.1914673v-1.1456909
h9.1914673V26.2683105z M57.404438,21.6855469h-9.1914673V20.539856h9.1914673V21.6855469z"/>
<g id="paint_x5F_brush">
<polygon id="paint_x5F_brush_x5F_shaft" class="st0" points="41.6965485,65.2217407 42.4845047,31.4855003 39.8335533,20.8818035
34.5317612,20.8818035 31.8808079,31.4855003 32.668766,65.2217407 "/>
<path id="paint_x5F_brush_x5F_tip" class="st0" d="M40.7088737,19.7361126
c0.7722778-1.1733189,1.775631-3.1726189,1.775631-5.6534939c0-5.1422243-7.0509987-7.2129793-5.3018494-13.0826187
c-0.7470016,0.8390205-5.3017902,7.9498148-5.3017902,13.0826187c0,2.8539448,0.819376,4.633482,1.5470791,5.6534939H40.7088737z"
/>
</g>
<g id="pencil">
<rect id="pencil_x5F_shaft" x="13.5497589" y="38.286869" class="st0" width="13.7482862" height="26.9348717"/>
<polygon id="pencil_x5F_tip" class="st0" points="22.6059189,25.2016068 18.2418861,25.2016068 13.7645836,37.1411209
27.0832214,37.1411209 "/>
<polygon id="pencil_x5F_lead" class="st0" points="20.4239025,19.3829746 18.456768,24.6287041 22.391037,24.6287041 "/>
</g>
</svg>
然后我复制代码并将其放在<symbol>这样的
<symbol viewbox="0 0 79 146" id="illustration_icon">
<rect id="cup" x="0.6777539" y="67.352684" class="st0" width="77.6444931" height="77.647316"/>
<path id="ruler_x5F_shape" class="st0" d="M47.0672798,19.394165v45.8275757h1.1456909v-1.1456909h4.5957031v1.1456909h12.6415443
V19.394165H47.0672798z M48.2129707,22.8312378h4.5957031v1.1456909h-4.5957031V22.8312378z M48.2129707,27.4140015h4.5957031
v1.1456909h-4.5957031V27.4140015z M48.2129707,31.9967651h4.5957031v1.1456909h-4.5957031V31.9967651z M48.2129707,36.5795288
h4.5957031v1.1456909h-4.5957031V36.5795288z M48.2129707,41.1622925h4.5957031v1.1456909h-4.5957031V41.1622925z
M48.2129707,45.7450562h4.5957031v1.1456909h-4.5957031V45.7450562z M48.2129707,50.3278198h4.5957031v1.1456909h-4.5957031
V50.3278198z M48.2129707,54.9105835h4.5957031v1.1456909h-4.5957031V54.9105835z M48.2129707,59.4932861h4.5957031v1.1456909
h-4.5957031V59.4932861z M57.404438,62.9303589h-9.1914673V61.784668h9.1914673V62.9303589z M57.404438,58.3475952h-9.1914673
v-1.1456909h9.1914673V58.3475952z M57.404438,53.7648926h-9.1914673v-1.1456909h9.1914673V53.7648926z M57.404438,49.1821289
h-9.1914673V48.036438h9.1914673V49.1821289z M57.404438,44.5993652h-9.1914673v-1.1456909h9.1914673V44.5993652z
M57.404438,40.0166016h-9.1914673v-1.1456909h9.1914673V40.0166016z M57.404438,35.4338379h-9.1914673V34.288147h9.1914673
V35.4338379z M57.404438,30.8510742h-9.1914673v-1.1456909h9.1914673V30.8510742z M57.404438,26.2683105h-9.1914673v-1.1456909
h9.1914673V26.2683105z M57.404438,21.6855469h-9.1914673V20.539856h9.1914673V21.6855469z"/>
<g id="paint_x5F_brush">
<polygon id="paint_x5F_brush_x5F_shaft" class="st0" points="41.6965485,65.2217407 42.4845047,31.4855003 39.8335533,20.8818035
34.5317612,20.8818035 31.8808079,31.4855003 32.668766,65.2217407 "/>
<path id="paint_x5F_brush_x5F_tip" class="st0" d="M40.7088737,19.7361126
c0.7722778-1.1733189,1.775631-3.1726189,1.775631-5.6534939c0-5.1422243-7.0509987-7.2129793-5.3018494-13.0826187
c-0.7470016,0.8390205-5.3017902,7.9498148-5.3017902,13.0826187c0,2.8539448,0.819376,4.633482,1.5470791,5.6534939H40.7088737z"
/>
</g>
<g id="pencil">
<rect id="pencil_x5F_shaft" x="13.5497589" y="38.286869" class="st0" width="13.7482862" height="26.9348717"/>
<polygon id="pencil_x5F_tip" class="st0" points="22.6059189,25.2016068 18.2418861,25.2016068 13.7645836,37.1411209
27.0832214,37.1411209 "/>
<polygon id="pencil_x5F_lead" class="st0" points="20.4239025,19.3829746 18.456768,24.6287041 22.391037,24.6287041 "/>
</g>
</symbol>
我在HTML中使用它的方式对于每个像这样的图标都是一样的
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 20vh;">
<div style="grid-area:1/1/2/2;">
<svg class="graphicA">
<use xlink:href="assets/symbol_sprite.svg#illustration_icon" />
</svg>
</div>
<div style="grid-area:1/2/2/3;">
<svg class="graphicA">
<use xlink:href="assets/symbol_sprite.svg#......" />
</svg>
</div>
<div style="grid-area:1/3/2/4;">
<svg class="graphicA">
<use xlink:href="assets/symbol_sprite.svg#......" />
</svg>
</div>
<!-- etc. etc. -->
</div>
您可以参考plunker获取完整代码。有没有人能够像其他人那样轻松地看到可能阻止此图标缩放的内容？
答案 0 :(得分：2)
代码中有一个关于viewBox的拼写错误。
<symbol viewbox="0 0 79 146" id="illustration_icon">
应该是：
<symbol viewBox="0 0 79 146" id="illustration_icon">