SVG调整大小冲突

时间:2018-07-09 08:28:01

标签: html svg header

我有一个存储按钮的标题。标头没有任何特殊功能,但是由于某种原因,它显示不正确。我在那里使用了SVG图标,并且全部使用,但其中一个显示正确。我认为这是一个尺寸问题。 viewBox均设置为 0 0 512 512 ,但是仍然显示一个图标,该图标非常小。

代码如下:

<table role="presentation">
<tbody>
<tr>
<td id="view:_id1:_id2:td14" class="header_button" title="123"><span id="view:_id1:_id2:close_nav" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="x-mark-4-icon" d="M462,256c0,113.771-92.229,206-206,206S50,369.771,50,256S142.229,50,256,50S462,142.229,462,256z M422,256c0-91.755-74.258-166-166-166c-91.755,0-166,74.259-166,166c0,91.755,74.258,166,166,166C347.755,422,422,347.741,422,256z M325.329,362.49l-67.327-67.324l-67.329,67.332l-36.164-36.186l67.314-67.322l-67.321-67.317l36.185-36.164l67.31,67.301l67.3-67.309l36.193,36.17l-67.312,67.315l67.32,67.31L325.329,362.49z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:td_actions" class="header_button"><span id="view:_id1:_id2:actions" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="cursor-pointer-2-icon" d="M230.609,80c13.906,0,18.68,9.272,18.68,23.18v102.844c0,19.223,7.324,25.894,13.175,25.894c4.662,0,8.389-4.237,6.725-9.734l-4.012-13.374c17.926,2.729,28.811,4.045,32.482,16.167l3.062,9.632c3.283,10.855,19.629,5.886,16.336-4.948l-4.23-12.449c16.18,2.152,28.082,3.705,31.633,15.437l3.391,9.38c3.264,10.805,19.646,5.95,16.332-4.943l-3.557-10.072c25.791,3.669,35.357,28.594,31.768,60.46c-4.797,42.594-34.166,62.935-34.166,144.529c-32.824,0-143.308,0-143.308,0c-15.432-61.973-46.52-105.326-81.875-138.431c-20.861-19.533-17.609-40.151,3.494-40.15c25.078,0,60.752,28.374,76.393,45.396V103.18C212.931,89.272,216.705,80,230.609,80z M230.609,50c-27.051,0-47.678,18.098-47.678,53.18v134.274c-48.529-27.005-81.059-10.855-90.873,13.979c-9.09,23.007,2.395,47.098,20.482,64.034c59.836,56.027,70.264,111.718,78.934,146.532h196.753v-30c0-76.095,28.285-90.625,33.977-141.173c5.215-46.294-11.445-84.631-57.354-93.518c-15.742-3.048-85.562-16.652-85.562-16.652V103.18C279.288,68.699,257.843,50,230.609,50z"></path></svg></td><td>Actions</td></tr></tbody></table></span></td>

<td id="view:_id1:_id2:td_blank" style="width:100%" class="header_blank"></td>
<td id="view:_id1:_id2:td_report2" class="header_button" title="Download report"><span id="view:_id1:_id2:report2" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="download-2-icon" d="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:_id10:td_documentation" class="header_button" title="Documentation"><span id="view:_id1:_id2:_id10:documentation" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="book-17-icon" d="M441.418,158.455v195.167l-12.445,2V158.455V118.97c-66.856,2.04-130.146,12.788-173,39.466c-42.856-26.678-106.144-37.426-173-39.466v39.485v197.167l-12.445-2V158.455h-20.5v219.001h155.45c25.376,0,28.161,15.574,50.495,15.574c22.376,0,25.071-15.574,50.496-15.574h155.504V158.455H441.418z M238.982,352.892c-33.402-13.253-73.892-21.78-123.029-25.474V154.9c40.354,3.386,88.635,11.587,123.029,32.984V352.892z M395.992,327.418c-49.138,3.693-89.628,12.221-123.029,25.474V187.885c34.394-21.397,82.675-29.599,123.029-32.984V327.418z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:td_doc" class="header_button" title="Document"><span id="view:_id1:_id2:document" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="note-13-icon" d="M353.012,302.715H158.988v-30h194.023V302.715z M352.979,237.298h-193.99v-30h193.99V237.298z M352.979,171.965h-193.99v-30h193.99V171.965z M116.333,422V90h279.334c0,0,0,186.325,0,218.075c0,63.121-77.928,37.833-77.928,37.833s23.859,76.092-35,76.092C250.677,422,234.675,422,116.333,422z M435.667,311.528V50H76.333v412h207.016C351.514,462,435.667,372.931,435.667,311.528z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:td_hier" class="header_button_selected" title="Hierarchy"><span id="view:_id1:_id2:hierarchy" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="sitemap-14-icon" d="M317.682,346.729l-61.504-61.503l-61.711,61.712c-5.943-8.126-13.287-15.162-21.681-20.746l68.381-68.381v-59.163c10.38,1.857,20.238,1.749,30.022-0.004v59.167l68.241,68.241C331.019,331.612,323.649,338.621,317.682,346.729z M221.167,115c0,19.299,15.7,35,35,35c19.299,0,35-15.701,35-35s-15.701-35-35-35C236.867,80,221.167,95.701,221.167,115z M321.167,115c0,35.899-29.101,65-65,65c-35.897,0-65-29.101-65-65s29.103-65,65-65C292.066,50,321.167,79.101,321.167,115z M351.167,397c0,19.299,15.701,35,35,35s35-15.701,35-35s-15.701-35-35-35S351.167,377.701,351.167,397z M451.167,397c0,35.898-29.102,65-65,65s-65-29.102-65-65s29.102-65,65-65S451.167,361.102,451.167,397z M90.833,397c0,19.299,15.701,35,35,35s35-15.701,35-35s-15.701-35-35-35S90.833,377.701,90.833,397z M190.833,397c0,35.898-29.102,65-65,65s-65-29.102-65-65s29.102-65,65-65S190.833,361.102,190.833,397z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:td_hist" class="header_button" title="History"><span id="view:_id1:_id2:history" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="note-21-icon" d="M116.333,422V90h279.334c0,0,0,186.325,0,218.075c0,63.121-77.928,37.833-77.928,37.833s23.859,76.092-35,76.092C250.677,422,234.675,422,116.333,422z M435.667,311.528V50H76.333v412h207.016C351.514,462,435.667,372.931,435.667,311.528z M249.842,352.15c-24.656,8.666-44.981-1.271-40.903-24.948c4.077-23.684,27.474-74.387,30.812-83.972c3.335-9.588-3.061-12.217-9.917-8.317c-3.954,2.282-9.83,6.854-14.876,11.297c-1.397-2.815-3.366-6.035-4.843-9.118c8.232-8.25,21.993-19.31,38.285-23.317c19.463-4.805,51.995,2.875,38.013,40.079c-9.984,26.517-17.045,44.816-21.495,58.443c-4.446,13.632,0.836,16.49,8.621,11.179c6.081-4.152,12.562-9.8,17.311-14.182c2.197,3.571,2.9,4.71,5.073,8.813C287.678,326.558,266.111,346.334,249.842,352.15z M300.926,188.118c-11.183,9.519-27.759,9.312-37.031-0.466c-9.271-9.772-7.724-25.411,3.456-34.933c11.183-9.518,27.761-9.312,37.031,0.46C313.652,162.955,312.106,178.596,300.926,188.118z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:td_access" class="header_button" title="Access"><span id="view:_id1:_id2:access" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="key-3-icon" d="M241.21,370.801h-43.874l0.002,43.873l-45.745-0.002v41.345H49.994v-70.458l145.737-145.737c4,9.534,8.962,18.622,14.771,27.135L79.994,397.985v28.031h41.599v-41.346l45.744,0.002l-0.002-43.872h61.448l28.655-29.168c9.066,5.548,18.794,10.217,29.086,13.854L241.21,370.801z M385.887,174.09c-11.599,11.597-30.402,11.599-41.999,0.001c-11.598-11.598-11.598-30.402,0-42.001c11.597-11.598,30.401-11.597,42.001,0C397.484,143.688,397.485,162.492,385.887,174.09z M337.882,55.983c-68.552,0-124.124,55.572-124.124,124.124S269.33,304.23,337.882,304.23s124.124-55.572,124.124-124.124S406.434,55.983,337.882,55.983z M337.882,274.23c-51.9,0-94.124-42.224-94.124-94.124s42.224-94.124,94.124-94.124s94.124,42.224,94.124,94.124S389.782,274.23,337.882,274.23z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:td6" class="header_button"><span id="view:_id1:_id2:help" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="help-3-icon" d="M256,90c91.74,0,166,74.244,166,166c0,91.741-74.245,166-166,166c-91.741,0-166-74.245-166-166C90,164.259,164.244,90,256,90 M256,50C142.229,50,50,142.229,50,256s92.229,206,206,206s206-92.229,206-206S369.771,50,256,50L256,50z M258.025,379.511c-14.546,0-26.343-11.797-26.343-26.349c0-14.543,11.797-26.336,26.343-26.336c14.549,0,26.342,11.793,26.342,26.336C284.367,367.714,272.574,379.511,258.025,379.511z M278.735,301.646v4.739c0,0-39.494,0-43.423,0v-4.739c0-13.408,1.956-30.61,17.523-45.565c15.569-14.958,35.024-27.312,35.024-45.996c0-20.655-14.335-31.581-32.409-31.581c-30.116,0-32.085,31.234-32.827,38.112H180.39c1.125-32.57,14.891-78.127,75.315-78.127c52.363,0,75.905,35.07,75.905,67.957C331.61,258.793,278.735,267.886,278.735,301.646z"></path></svg></td></tr></tbody></table></span></td>
<td id="view:_id1:_id2:td_exit" class="header_button"><span id="view:_id1:_id2:exit" class="xspTextComputedField"><table style="width:100.0%;border:none;padding:0px"><tbody><tr><td style="width:1%"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 512 512" class="icon" xml:space="preserve"><path id="power-off-icon" d="M291,50h-70v184.001h70V50z M366.227,112.407c22.621,15.837,41.927,36.611,56.2,61.334c34.329,59.458,34.329,132.714,0,192.173C388.098,425.372,324.656,462,256,462c-68.657,0-132.099-36.628-166.427-96.086c-34.329-59.459-34.329-132.715,0-192.173c14.272-24.723,33.579-45.497,56.2-61.334l23.444,33.483c-17.81,12.468-33.009,28.824-44.247,48.287c-27.026,46.812-27.026,104.487,0,151.299c27.027,46.812,76.976,75.649,131.029,75.649s104.001-28.838,131.028-75.649c27.026-46.812,27.026-104.486,0-151.299c-11.237-19.463-26.438-35.819-44.247-48.287L366.227,112.407z"></path></svg></td></tr></tbody></table></span></td>
</tr>
</tbody>

</table>

看到了吗? “下载报告”一定有问题。但是我还没有弄清楚它是什么。你能帮忙吗?预先感谢。

2 个答案:

答案 0 :(得分:1)

svg出了点问题。尝试使用这个:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve"> <path id="download-2-icon" d="M26.7,18.3H35L20,35L5,18.3h8.3V0h13.3V18.3z M28.3,36.7H11.7V40h16.7V36.7z"/> </svg>

.icon {
width: 40px;
height: 40px;
}
<div class="icon">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<path id="download-2-icon" d="M26.7,18.3H35L20,35L5,18.3h8.3V0h13.3V18.3z M28.3,36.7H11.7V40h16.7V36.7z"/>
</svg>

</div>

答案 1 :(得分:1)

如果仔细看一下SVG,您会发现所使用路径的大小为24 x 24,这在512 x 512视图框中非常小。

解决问题的最简单方法是将视图框设置为viewBox =“ 0 0 24 24”

通过采用SVG路径元素并将draw属性转换为绝对单位(大写字母),您可以更清楚地看到这一点:

<path id="download-2-icon" d="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z"></path>

成为

<path id="download-2-icon" d="M16,11 H21 L12,21 3,11 H8 V0 H16 V11 Z M17,22 H7 V24 H17 V22 Z"></path>

在这里您可以更清楚地看到最大的Y值是24(V24),箭头的中点是X 12(L12),最大化了路径的矩形边界24 x 24。