色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

當懸停在無色SVG上時，顯示一個彩色SVG

CSS
榮姿康1年前7瀏覽0評論

我使用SVG的社交媒體圖標，我有麻煩，所以每當我懸停在默認的無色SVG上，它就會顯示一個彩色版本。 下面是無色SVG的代碼:

<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="22" stroke="#E2E3E4" stroke-width="2"/>
<path opacity="0.3" d="M24 20V18.5C24 18.2348 24.1054 17.9804 24.2929 17.7929C24.4804 17.6054 24.7348 17.5 25 17.5H26V15H24C23.2044 15 22.4413 15.3161 21.8787 15.8787C21.3161 16.4413 21 17.2044 21 18V20H19V23H21V31H24V23H26L27 20H24Z" fill="#131821"/>
</svg>

正如enxaneta所評論的:你需要調整第二個圖標的視圖框。

通過向svg添加邊框(通過CSS ),可以很容易地可視化當前的視圖框。

您可以使用本機getBBox()方法快速檢索適當的視圖框。

let bb = svgHoverFixed.getBBox();
let {x,y, width, height} = bb;
// get approriate viewBox (with some rounding)
let viewBoxCropped = [x, y, width, height].map(val => {
  return +val.toFixed(2)
}).join(' ');
svgHoverFixed.setAttribute('viewBox', viewBoxCropped);
console.log(viewBoxCropped)

svg {
  border: 1px solid #ccc;
  width: 10em;
  height: auto;
  overflow: visible;
}

<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="22" stroke="#E2E3E4" stroke-width="2"/>
<path opacity="0.3" d="M24 20V18.5C24 18.2348 24.1054 17.9804 24.2929 17.7929C24.4804 17.6054 24.7348 17.5 25 17.5H26V15H24C23.2044 15 22.4413 15.3161 21.8787 15.8787C21.3161 16.4413 21 17.2044 21 18V20H19V23H21V31H24V23H26L27 20H24Z" fill="#131821"/>
</svg>

<svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_74090_402)">
<circle cx="63" cy="43" r="23" fill="#4267B2"/>
</g>
<path d="M64 40V38.5C64 38.2348 64.1054 37.9804 64.2929 37.7929C64.4804 37.6054 64.7348 37.5 65 37.5H66V35H64C63.2044 35 62.4413 35.3161 61.8787 35.8787C61.3161 36.4413 61 37.2044 61 38V40H59V43H61V51H64V43H66L67 40H64Z" fill="white"/>
<defs>
<filter id="filter0_d_74090_402" x="0" y="0" width="126" height="126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0745098 0 0 0 0 0.0941176 0 0 0 0 0.129412 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_74090_402"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_74090_402" result="shape"/>
</filter>
</defs>
</svg>

<svg id="svgHoverFixed" width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_74090_402)">
<circle cx="63" cy="43" r="23" fill="#4267B2"/>
</g>
<path d="M64 40V38.5C64 38.2348 64.1054 37.9804 64.2929 37.7929C64.4804 37.6054 64.7348 37.5 65 37.5H66V35H64C63.2044 35 62.4413 35.3161 61.8787 35.8787C61.3161 36.4413 61 37.2044 61 38V40H59V43H61V51H64V43H66L67 40H64Z" fill="white"/>
<defs>
<filter id="filter0_d_74090_402" x="0" y="0" width="126" height="126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="20"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0745098 0 0 0 0 0.0941176 0 0 0 0 0.129412 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_74090_402"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_74090_402" result="shape"/>
</filter>
</defs>
</svg>