我想擴大嵌套在另一個 svg 中的懸停 3 個 svg。這 3 個 svg 是在此地址的第一張圖上可見的行星：http://68.183.74.150:3000/ planet。因此，總而言之，代碼如下所示：
<svg id="a">
<g>
...
</g>
<g>
<svg id="b"></svg>
</g>
</svg>
我嘗試了下面的代碼，但它不起作用，因為 b 嵌套在 a 中。如果我將此代碼應用于“a”svg，它會起作用。
svg#b:hover {
transform: scale(3);
}
svg#b {
transition: all 1s;
transform-origin: 50% 50%;
}
你會如何解決這個問題？
uj5u.com熱心網友回復：
顯然，鉻似乎在縮放嵌套的 svg 元素方面存在問題。
顯示代碼片段
/* example layout */
.wrap {
display: inline-block;
width: 20em;
}
.svgParent {
width: 10em;
border: 2px solid #ccc;
}
.svgParent:hover {
border: 2px solid green;
}
/* set transformorigin */
.svgChild,
.childNodes {
transition: 0.3s;
transform-origin: center;
}
/* ensure scaled element don't get cropped when scaled */
.svgChild {
overflow: visible;
}
.hoverElement:hover {
transform: scale(1.3);
opacity: 0.5;
}<div class="wrap">
<p>Scale nested svg on hover –<br />not working in chrome</p>
<svg class="svgParent" viewBox="0 0 100 100">
<svg class="svgChild hoverElement" x="20" y="20" width="48" height="48" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12" fill="#ccc" />
</svg>
</svg>
</div>
<div class="wrap">
<p>Scale group in nested svg on hover</p>
<svg class="svgParent" viewBox="0 0 100 100">
<svg class="svgChild" x="20" y="20" width="48" height="48" viewBox="0 0 24 24">
<g class="childNodes hoverElement">
<circle cx="12" cy="12" r="12" fill="#ccc" />
</g>
</svg>
</svg>
</div>為了在 firefox 和 chromium 中保持一致的顯示，您可以將行星的子元素包裝成一個額外的組，如下所示：
<svg x="129.2" y="62.1" width="26" height="26" viewBox="0 0 36 36">
<g class="planetwrap">
<circle fill="#88C9F9" cx="18" cy="18" r="18" />
<path fill="#5C913B" d="M25.716 1.756c-1.022.568-1.872 1.528-3.028 1.181-1.875-.562-4.375-1.812-6-.25s-2 3 0 2.938 3.375-2.438 4.375-1.438.749 1.813-1.625 2.125S14.5 7 13.125 7s-1.688.812-.75 1.688-.563.937-2.125 1.812.375 1.25 1.688 2 2.312-.188 2.875-1.438 2.981-2.75 3.99-2.562c1.01.188 1.01.688.822 1.562s.75.625.812-.375 1.188-1.75 2.062-1.812 1.625 1.188.625 1.812-2 1.125-.75 1.438 2.125 1.938.688 2.625-3.937 1.125-5.062.562-3.688-1.375-4.375-.938-1.062.89-1.875 1.195c-.812.305-4.125 1.805-4.188 3.743S7.438 22.438 8.75 22.5s4.5-.812 5.5-1.625 2.375-.625 2.812.312.125 1.5-.312 3 .286 2.25.987 3.562c.701 1.312 1.263 2.062 1.263 3s1 1.875 2.5.312 2.875-4.625 3.5-5.75 1.125-3.625 1.875-4.125 1.938-1.688 1.062-1.5-2.625-.062-3.062-1.312-2.312-3.625-1.438-3.875 1.875 1.39 2.25 2.164c.375.774.875 1.711 1.625 1.961s2.375-1.673 2.875-1.961c.5-.289.125-1.476-.875-1.351s-2.312 0-2.312-.624 1.25-1.438 2.25-1.25 1.75.5 2.375 1.25 1.875 2.125 2.375 3 .875 1 1.125-.562c.166-1.038.387-1.609.59-2.222-1.013-5.829-4.82-10.683-9.999-13.148z" />
</g>
</svg>
分組示例
如果您不能靜態優化和保存調整后的行星資產，您可以使用一些 js 來完成包裝作業。
顯示代碼片段
let planets = document.querySelectorAll('.recharts-reference-dot svg');
// wrap planet svg elements
planets.forEach(function(planet, i){
planet.innerHTML = '<g >' planet.innerHTML '</g>';
}).recharts-reference-dot svg{
overflow:visible;
}
.planetwrap{
transform-origin:center;
transition: 0.3s transform
}
.planetwrap:hover{
transform:scale(1.5)
}<div class="recharts-wrapper" style="position: relative; cursor: default; width: 899px; height: 199.778px;"><svg id="masse_distance" class="recharts-surface" width="899" height="199.77777777777777" viewBox="0 0 899 199.77777777777777" version="1.1">
<defs>
<clipPath id="masse_distance-clip">
<rect x="70" y="20" height="139.77777777777777" width="809"></rect>
</clipPath>
</defs>
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="70" y1="159.77777777777777" x2="879" y2="159.77777777777777"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="231.8" y1="165.77777777777777" x2="231.8" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="231.8" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="231.8" dy="0.71em">0.01 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="308.99821901364135" y1="165.77777777777777" x2="308.99821901364135" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="308.99821901364135" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="308.99821901364135" dy="0.71em">0.03 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="393.6" y1="165.77777777777777" x2="393.6" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="393.6" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="393.6" dy="0.71em">0.1 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="555.4" y1="165.77777777777777" x2="555.4" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="555.4" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="555.4" dy="0.71em">1 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="717.2" y1="165.77777777777777" x2="717.2" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="717.2" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="717.2" dy="0.71em">10 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="879" y1="165.77777777777777" x2="879" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="873.265625" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="873.265625" dy="0.71em">100 Mjup</tspan>
</text>
</g>
</g>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="70" y1="20" x2="70" y2="159.77777777777777"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="64" y1="124.83333333333333" x2="70" y2="124.83333333333333"></line><text name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="62" y="124.83333333333333" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="62" dy="0.355em">1 jour</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="64" y1="89.88888888888887" x2="70" y2="89.88888888888887"></line><text name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="62" y="89.88888888888887" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="62" dy="0.355em">100 jour</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="64" y1="61.208688458136685" x2="70" y2="61.208688458136685"></line><text name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="62" y="61.208688458136685" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="62" dy="0.355em">4380 jour</tspan>
</text>
</g>
</g>
</g>
<g class="recharts-layer recharts-reference-dot">
<g>
<svg x="129.19821901364134" y="62.06438300713549" width="26" height="26" viewBox="0 0 36 36">
<circle fill="#88C9F9" cx="18" cy="18" r="18"></circle>
<path fill="#5C913B" d="M25.716 1.756c-1.022.568-1.872 1.528-3.028 1.181-1.875-.562-4.375-1.812-6-.25s-2 3 0 2.938 3.375-2.438 4.375-1.438.749 1.813-1.625 2.125S14.5 7 13.125 7s-1.688.812-.75 1.688-.563.937-2.125 1.812.375 1.25 1.688 2 2.312-.188 2.875-1.438 2.981-2.75 3.99-2.562c1.01.188 1.01.688.822 1.562s.75.625.812-.375 1.188-1.75 2.062-1.812 1.625 1.188.625 1.812-2 1.125-.75 1.438 2.125 1.938.688 2.625-3.937 1.125-5.062.562-3.688-1.375-4.375-.938-1.062.89-1.875 1.195c-.812.305-4.125 1.805-4.188 3.743S7.438 22.438 8.75 22.5s4.5-.812 5.5-1.625 2.375-.625 2.812.312.125 1.5-.312 3 .286 2.25.987 3.562c.701 1.312 1.263 2.062 1.263 3s1 1.875 2.5.312 2.875-4.625 3.5-5.75 1.125-3.625 1.875-4.125 1.938-1.688 1.062-1.5-2.625-.062-3.062-1.312-2.312-3.625-1.438-3.875 1.875 1.39 2.25 2.164c.375.774.875 1.711 1.625 1.961s2.375-1.673 2.875-1.961c.5-.289.125-1.476-.875-1.351s-2.312 0-2.312-.624 1.25-1.438 2.25-1.25 1.75.5 2.375 1.25 1.875 2.125 2.375 3 .875 1 1.125-.562c.166-1.038.387-1.609.59-2.222-1.013-5.829-4.82-10.683-9.999-13.148z"></path>
</svg>
</g><text x="167.19821901364134" y="70.06438300713549">Terre</text>
</g>
</svg></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432816.html
標籤：svg