第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

在 HTML 視圖框中縮放 SVG

在 HTML 視圖框中縮放 SVG

婷婷同學(xué)_ 2023-10-30 20:50:16
我需要一些有關(guān)在 HTML 視圖框中縮放 SVG 的幫助。我正在使用網(wǎng)站的 HTML 模板，并希望將模板的標(biāo)準(zhǔn) SVG 圖像更改為另一個(gè)圖像。我無(wú)法讓路徑 d="something,something" 的新 SVG 正確縮放。我希望新的 SVG 圖像能夠正確地適合 91 x 91 視圖框的中心。我在線查看了 SVG viewbox 系統(tǒng)，但無(wú)法理解它是如何工作的。我有一些 python 編碼經(jīng)驗(yàn)，但沒(méi)什么太嚴(yán)重的，沒(méi)有 HTML 經(jīng)驗(yàn)。請(qǐng)幫忙，解釋如下。標(biāo)準(zhǔn) SVG 圖像的代碼如下：<div id="section-publications" class="o-container   wow1 fadeIn"  data-contentPosition="4"><div class="c-section-heading">  <svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91">    <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90"/>  </svg></div>看起來(lái)像這樣：我想將 SVG 更改為不同的內(nèi)容，例如握手（或至少是其他內(nèi)容......）。我有一個(gè) SVG 握手文件，如下所示：
查看完整描述

2 回答

?
手掌心

TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊

viewBox 的工作原理

其實(shí)很簡(jiǎn)單。

為了讓瀏覽器縮放 SVG 內(nèi)容以適應(yīng)您指定的寬度和高度，它需要知道該內(nèi)容有多大。

您可以通過(guò)屬性來(lái)告訴它該內(nèi)容有多大viewBox。a 中的值為viewBox：

<minimum X> <minimum Y> <width> <height>

假設(shè)您的內(nèi)容是從 (10,20) 到 (80,80) 的正方形。完全符合該正方形的定義viewBox是：

viewBox="10 20 70 60"

這表示內(nèi)容的左上角位于 10,20，寬度為 70，高度為 60。

這是一個(gè)圖表來(lái)說(shuō)明我的意思。

<svg width="300" height="300">

  <g transform="translate(50 50) scale(2)">

     >!-- axes -->

     <line x1="0.25" y1="-100" y1="0.25" y2="300" stroke="grey" stroke-width="0.5"/>

     <line x1="-100" y1="0.25" x2="300" y2="0.25" stroke="grey" stroke-width="0.5"/>


     <!-- bounds -->

     <line x1="10.25" y1="-100" x2="10.25" y2="300" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>

     <line x1="-100" y1="20.25" x2="300" y2="20.25" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>

     <line x1="80.25" y1="-100" x2="80.25" y2="300" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>

     <line x1="-100" y1="80.25" x2="300" y2="80.25" stroke="grey" stroke-width="0.5" stroke-dasharray="3 3"/>


     <!-- rectangle -->

     <rect x="10" y="20" width="70" height="60" fill="rebeccapurple"/>

     

     <!-- labels -->

     <g fill="grey" font-size="6px" font-family="sans-serif">

       <text x="-2" y="-2" text-anchor="end">0,0</text>

       <text x="12" y="-2">10</text>

       <text x="82" y="-2">80</text>

       <text x="-2" y="27" text-anchor="end">20</text>

       <text x="-2" y="87" text-anchor="end">80</text>

       <text x="45" y="87" text-anchor="middle">width = 70</text>

       <text x="82" y="50">height = 60</text>

     </g>

  </g>

</svg>

現(xiàn)在瀏覽器知道 SVG 內(nèi)容的邊界，它可以計(jì)算如何縮放和定位該內(nèi)容，使其適合您的視口。視口只是指頁(yè)面上 SVG 繪制到的矩形。您可以使用width和來(lái)定義它height。

你的握手 SVG

顯然，viewBox握手圖標(biāo)對(duì)于內(nèi)容來(lái)說(shuō)太大了。正因?yàn)槿绱?，它的?guī)模還不夠大。我們需要找到與握手圖標(biāo)形狀緊密配合的 viewBox。

但堅(jiān)持住...

但我們有一個(gè)問(wèn)題。您保留了之前圖標(biāo)中的方形形狀。如果我們放大手的形狀，矩形就會(huì)變得太大。解決您的問(wèn)題的最簡(jiǎn)單的方法就是放大并重新定位其余內(nèi)容以適合您的正方形：

.svg-icon__border {

  fill: none;

  stroke: red;

}

<svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91" >

        <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90"/>

        <g id="test" transform="translate(25,25) scale(1.3)">

            <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>

            <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>

            <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>

            <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>

            <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>

            <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>

            <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>

            <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>

        </g>

      </svg>

調(diào)整viewBox

另一種選擇是去掉正方形，這樣你就不必?fù)?dān)心它。計(jì)算一個(gè)比較合適的viewBox。然后您可以按照自己的喜好調(diào)整圖標(biāo)的大小和位置。如果您希望稍后恢復(fù)正方形，可以向其父容器添加邊框樣式。

那么我們?nèi)绾未_定正確的viewBox應(yīng)該是什么？嗯，有幾種方法可以做到這一點(diǎn)。

  • 您可以通過(guò)手動(dòng)更改值來(lái)進(jìn)行實(shí)驗(yàn)

  • 您可以將其加載到矢量或 SVG 編輯器中并使用其標(biāo)尺

  • getBBox()您可以在 SVG 上使用 Javascript 方法。該getBBox()函數(shù)返回內(nèi)容的邊界。這些將有助于告知viewBox值應(yīng)該是什么。

如果我們從 SVG 中刪除正方形并使用最后一個(gè)方法，我們將得到邊界框值：

{

  "x": 0.0009997636079788208,

  "y": 6.000142574310303,

  "width": 31.998998641967773,

  "height": 19.99785614013672

}

console.log(document.getElementById("test-svg").getBBox());

.svg-icon__border {

  fill: none;

  stroke: red;

}

<svg id="test-svg" class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91" >

    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>

    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>

    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>

    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>

    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>

    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>

    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>

    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>

  </svg>

從這些值中我們可以看到我們的圖標(biāo)在 X 方向上覆蓋了（大約）0 到 32，在 Y 方向上覆蓋了 6 到 20。

由此可見(jiàn)，該圖標(biāo)的設(shè)計(jì)適合 32x32 SVG。所以讓我們將其設(shè)置viewBox為：

viewBox="0 0 32 32"

這就是看起來(lái)的樣子，仍然是width="91" height="91". 我還在 SVG 周?chē)砑恿司G色邊框，作為我們刪除的矩形的替代。

svg {

  border: solid 1px green;

}

<svg id="test-svg" class="c-section-heading__icon svg-icon" width="91" height="91" viewBox="0 0 32 32" >

    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>

    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>

    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>

    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>

    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>

    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>

    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>

    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>

  </svg>

下一步

現(xiàn)在我們有了“正確的”，viewBox您可以看到手正在按比例放大以填充我們的視口（ 和width）height區(qū)域。但這確實(shí)意味著原始圖標(biāo)周?chē)奶畛湎Я恕?/p>

要恢復(fù)此填充，您有以下幾種選擇：

  1. 將填充合并到viewBox. 您可以通過(guò)從<minimum X>和 中的<minimum Y>值減去一個(gè)金額并向和中的值viewBox添加額外的值來(lái)完成此操作。例如，如果我們?cè)?32x32 形狀周?chē)砑?16 個(gè)單位的填充，則調(diào)整后的結(jié)果為：<width><height>viewBox

    視圖框=“-16 -16 64 64”

演示：

svg {

  border: solid 1px green;

}

<svg id="test-svg" class="c-section-heading__icon svg-icon" width="91" height="91" viewBox="-16 -16 64 64" >

    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>

    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>

    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>

    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>

    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>

    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>

    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>

    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>

  </svg>

或者，您可以使用 CSS 樣式來(lái)調(diào)整容器內(nèi)新圖標(biāo)的大小和位置<div>。

演示：

div.icon-container {

  display: inline-block;

  padding: 23px;

  border: solid 1px green;

}


div.icon-container svg {

  width: 45px;

  height: 45px;

}

<div class="icon-container">

  <svg id="test-svg" class="c-section-heading__icon svg-icon" viewBox=" 0 0 32 32" >

    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>

    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>

    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>

    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>

    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>

    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>

    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>

    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>

  </svg>

 </div>


查看完整回答
反對(duì) 回復(fù) 2023-10-30
?
慕標(biāo)5832272

TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊

您需要將握手包裝在符號(hào)中，并為該符號(hào)提供 viewBox 屬性。接下來(lái)，您使用該符號(hào)并為元素提供use所需的位置（x，y）和大?。▽挾?，高度）。


<use xlink:href="#handshake" x=".5" y=".5" width="90" height="90" />

為了知道 viewBox 的值，我首先將握手包裝在一個(gè)g元素中，并使用了該getBBox()方法。


<svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91" >

    <rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90" fill="gold"/> 


  <symbol id="handshake" viewBox="0 0 32 32">

    <path class="svg-icon__item" d="M25.267 19.713c-0.628-1.309-2.875-3.127-5.045-4.883-1.211-0.979-2.355-1.904-3.084-2.633-0.183-0.184-0.456-0.243-0.697-0.156-0.449 0.163-0.727 0.288-0.945 0.385-0.333 0.149-0.445 0.2-0.895 0.245-0.199 0.020-0.377 0.127-0.488 0.292-0.943 1.409-1.919 1.289-2.571 1.071-0.208-0.069-0.245-0.159-0.265-0.244-0.14-0.585 0.563-1.948 1.473-2.859 2.167-2.168 3.284-2.711 5.644-1.656 2.677 1.197 5.36 2.135 5.387 2.144 0.351 0.121 0.728-0.063 0.849-0.411 0.12-0.348-0.063-0.728-0.411-0.849-0.027-0.009-2.656-0.928-5.28-2.103-3.057-1.367-4.735-0.467-7.131 1.931-0.912 0.912-2.151 2.757-1.831 4.111 0.137 0.576 0.543 1.003 1.145 1.201 1.511 0.499 2.889 0.021 3.916-1.341 0.424-0.065 0.655-0.161 1.001-0.317 0.125-0.056 0.272-0.121 0.467-0.2 0.763 0.716 1.792 1.549 2.876 2.425 1.96 1.585 4.183 3.383 4.683 4.423 0.247 0.513-0.019 0.848-0.199 1.001-0.264 0.227-0.625 0.299-0.821 0.161-0.216-0.148-0.497-0.157-0.72-0.024-0.224 0.133-0.349 0.385-0.321 0.644 0.045 0.424-0.343 0.667-0.511 0.751-0.427 0.216-0.872 0.179-1.039 0.024-0.187-0.173-0.455-0.224-0.692-0.136-0.237 0.089-0.403 0.308-0.427 0.561-0.040 0.437-0.364 0.857-0.787 1.021-0.204 0.077-0.5 0.124-0.765-0.119-0.165-0.149-0.395-0.207-0.609-0.155-0.217 0.053-0.392 0.211-0.468 0.42-0.025 0.067-0.083 0.227-0.707 0.227-0.444 0-1.243-0.3-1.633-0.559-0.468-0.308-3.403-2.497-5.937-4.62-0.356-0.3-0.972-0.943-1.516-1.511-0.483-0.504-0.924-0.961-1.151-1.153-0.284-0.24-0.704-0.204-0.94 0.079-0.237 0.281-0.203 0.703 0.079 0.94 0.207 0.175 0.607 0.597 1.048 1.057 0.595 0.621 1.209 1.264 1.623 1.611 2.483 2.079 5.467 4.323 6.061 4.713 0.491 0.323 1.548 0.776 2.367 0.776 0.657 0 1.163-0.151 1.513-0.445 0.469 0.183 1.003 0.184 1.516-0.016 0.607-0.235 1.105-0.708 1.388-1.281 0.525 0.112 1.127 0.033 1.673-0.241 0.535-0.269 0.921-0.681 1.113-1.163 0.531 0.028 1.077-0.16 1.529-0.548 0.765-0.655 0.976-1.673 0.533-2.592z"></path>

    <path class="svg-icon__item" d="M13.333 8.666h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"></path>

    <path class="svg-icon__item" d="M27.22 18.294c-0.207-0.305-0.62-0.389-0.925-0.181l-1.949 1.309c-0.305 0.205-0.387 0.62-0.181 0.925 0.129 0.191 0.34 0.295 0.555 0.295 0.127 0 0.256-0.036 0.371-0.113l1.949-1.309c0.305-0.205 0.387-0.62 0.181-0.925z"></path>

    <path class="svg-icon__item" d="M23.081 21.476c-0.477-0.376-2.612-2.561-3.932-3.937-0.255-0.267-0.677-0.276-0.943-0.020-0.267 0.255-0.275 0.677-0.020 0.943 0.343 0.357 3.365 3.508 4.068 4.063 0.121 0.096 0.268 0.143 0.412 0.143 0.196 0 0.392-0.088 0.525-0.255 0.228-0.288 0.179-0.708-0.111-0.936z"></path>

    <path class="svg-icon__item" d="M20.417 22.813c-0.799-0.639-2.805-2.771-3.259-3.264-0.251-0.272-0.671-0.288-0.943-0.040-0.271 0.249-0.289 0.672-0.040 0.943 0.024 0.025 2.419 2.611 3.408 3.403 0.123 0.097 0.271 0.145 0.416 0.145 0.195 0 0.389-0.087 0.521-0.249 0.229-0.288 0.183-0.708-0.104-0.937z"></path>

    <path class="svg-icon__item" d="M17.764 24.156c-0.951-0.801-2.896-2.872-3.276-3.279-0.252-0.269-0.675-0.284-0.943-0.032-0.269 0.252-0.283 0.673-0.032 0.943 0.547 0.585 2.408 2.559 3.391 3.388 0.125 0.105 0.277 0.157 0.429 0.157 0.189 0 0.379-0.081 0.511-0.237 0.237-0.283 0.201-0.703-0.080-0.94z"></path>

    <path class="svg-icon__item" d="M7.792 7.516c-1.143-1.083-5.712-1.433-7.085-1.515-0.189-0.009-0.364 0.053-0.497 0.18-0.133 0.125-0.209 0.301-0.209 0.485v12c0 0.368 0.299 0.667 0.667 0.667h4c0.288 0 0.544-0.185 0.633-0.46 0.097-0.299 2.395-7.349 2.697-10.816 0.017-0.203-0.057-0.403-0.205-0.541zM4.18 18h-2.847v-10.619c2.143 0.169 4.455 0.537 5.295 0.945-0.353 2.92-1.952 8.108-2.448 9.673z"></path>

    <path class="svg-icon__item" d="M31.333 7.333c-5.235 0-8.139 1.34-8.26 1.396-0.173 0.081-0.303 0.232-0.356 0.415s-0.027 0.379 0.073 0.541c0.824 1.327 3.404 8.695 3.9 10.492 0.080 0.289 0.343 0.489 0.643 0.489h4c0.368 0 0.667-0.299 0.667-0.667v-12c0-0.369-0.299-0.667-0.667-0.667zM30.667 19.333h-2.835c-0.632-2.059-2.499-7.427-3.54-9.645 1.017-0.345 3.203-0.939 6.375-1.013v10.659z"></path>

  </symbol>

  <use xlink:href="#handshake" x=".5" y=".5" width="90" height="90" />

  </svg>


查看完整回答
反對(duì) 回復(fù) 2023-10-30
  • 2 回答
  • 0 關(guān)注
  • 210 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)