scale a svg element which is inside an other svg-CodePudding

I would like to scale up on hover 3 svgs nested in an other svg. These 3 svgs are planets visible on the first graph at this address : http://68.183.74.150:3000/planet. So, to sum up, the code looks like this :

<svg id="a">
<g>
...
</g>
<g>
<svg id="b"></svg>
</g>
</svg>

I tried the code below but it doesn't work as b is nested inside a. It works if I apply this code to the "a" svg.

svg#b:hover  {
  transform: scale(3);
}
svg#b {
  transition: all 1s;
  transform-origin: 50% 50%;
}

How would you solve this ?

CodePudding user response：

Apparently chromium seems to have issues with scaling nested svg elements.

/* 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 >
  <p>Scale nested svg on hover –<br />not working in chrome</p>
  <svg  viewBox="0 0 100 100">
    <svg  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 >
  <p>Scale group in nested svg on hover</p>
  <svg  viewBox="0 0 100 100">
    <svg  x="20" y="20" width="48" height="48" viewBox="0 0 24 24">
      <g >
        <circle cx="12" cy="12" r="12" fill="#ccc" />
      </g>
    </svg>
  </svg>
</div>

For a consistent display in both firefox and chromium you could wrap your planets' child elements an additional group like so:

<svg x="129.2" y="62.1" width="26" height="26" viewBox="0 0 36 36">
  <g >
    <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>

Example grouped

If you can't optimize and save your tweaked planet assets statically you could use some js to do the wrapping job.

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  style="position: relative; cursor: default; width: 899px; height: 199.778px;"><svg id="masse_distance"  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 >
      <line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777"  stroke="#666" fill="none" x1="70" y1="159.77777777777777" x2="879" y2="159.77777777777777"></line>
      <g >
        <g >
          <line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777"  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"  text-anchor="middle">
            <tspan x="231.8" dy="0.71em">0.01 Mjup</tspan>
          </text>
        </g>
        <g >
          <line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777"  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"  text-anchor="middle">
            <tspan x="308.99821901364135" dy="0.71em">0.03 Mjup</tspan>
          </text>
        </g>
        <g >
          <line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777"  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"  text-anchor="middle">
            <tspan x="393.6" dy="0.71em">0.1 Mjup</tspan>
          </text>
        </g>
        <g >
          <line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777"  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"  text-anchor="middle">
            <tspan x="555.4" dy="0.71em">1 Mjup</tspan>
          </text>
        </g>
        <g >
          <line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777"  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"  text-anchor="middle">
            <tspan x="717.2" dy="0.71em">10 Mjup</tspan>
          </text>
        </g>
        <g >
          <line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777"  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"  text-anchor="middle">
            <tspan x="873.265625" dy="0.71em">100 Mjup</tspan>
          </text>
        </g>
      </g>
    </g>
    <g >
      <line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20"  stroke="#666" fill="none" x1="70" y1="20" x2="70" y2="159.77777777777777"></line>
      <g >
        <g >
          <line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20"  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"  text-anchor="end">
            <tspan x="62" dy="0.355em">1 jour</tspan>
          </text>
        </g>
        <g >
          <line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20"  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"  text-anchor="end">
            <tspan x="62" dy="0.355em">100 jour</tspan>
          </text>
        </g>
        <g >
          <line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20"  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"  text-anchor="end">
            <tspan x="62" dy="0.355em">4380 jour</tspan>
          </text>
        </g>
      </g>
    </g>
    <g >
      <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>