svg and div positioning

Question

如果您查看Fiddle。蓝色正方形是容器width:500px heigh:500px。红色是带有svg 300x200px的div，橙色是200x199px的div，黄色是100x100px的div。如果您查看代码，黄色元素应该在红色div内，橙色div在红色正方形的右侧，就像在这个没有svg的fiddle中一样。怎样才能做到这一点？如果可能的话。

Answer 1

不能将<div>之类的HTML元素放入SVG中。所以这是你的主要问题。否则，如果你像你的"另一把小提琴"一样安排事情，它应该会起作用。

.a {
  height: 500px;
  width: 500px;
  background-color: lightblue;
}
.e {
  max-width: 300px;
  float: left;
  position: relative;
}
svg {
  height: 200px;
  width:100%;
  background-color: red; 
}
.c {
  height: 200px;
  width: 199px;
  background-color: orange; 
  float:left;
}
.d {
  height: 100px;
  width: 100px;
  background-color: yellow;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

<div class="a">
  <div class="e">
    
    <svg  viewBox="0 0 920 620" preserveAspectRatio="xMaxYMax"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g fill="#fdc689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"  cursor="pointer" >
        <a xlink:href="#" > 
          <path d="M324.65 458.41l0.71,-0.12l1.72,2.31l0.23,0.92l1.47,0.68l1.5,-0.23l0.4,-0.77l1.44,-0.43l0.83,0.06l0.66,0.42l1.09,-1.02l1.13,0.02l0.71,0.86l0.55,-0.1l2.48,2.5l1.02,-0.49l0.76,0.58l1.21,0.05l0.79,-1.03l1.34,-0.03l0.62,-0.63l1.33,2.14l0.61,0.42l1.47,-0.07l0.55,0.62l0.21,1.49l0.88,0.8l-0.07,0.53l1.63,1.87l2.85,6.28l2.97,2.97l-1.29,2.39l0.3,0.59l12.27,1.54l0.89,0.87l3.92,0.39l0.39,3.32l0.5,0.34l1.88,-0.59l0.94,3.51l-0.69,0.73l-0.06,0.48l0.72,1.31l-1.74,2.97l0.2,1.05l-0.3,0.83l0.31,0.99l-0.55,0.5l-8.33,0.82l-0.25,0.67l4.59,4.76l2.46,8.71l-8.23,4.45l-0.09,0.67l0.5,0.42l-1.15,1.81l-1.11,-0.27l0.06,-0.96l-0.73,-0.3l-0.22,-0.79l-0.83,-0.55l-1.85,-0.44l-0.88,0.26l-0.59,-0.38l-0.64,0.34l-2.11,-0.88l-1.41,-0.02l-0.85,-1.71l-0.81,-0.71l-0.57,-1.08l-0.43,-0.15l-0.19,-0.76l-0.92,-0.64l-1.41,0.53l-0.38,-0.4l-0.38,-0.89l0.11,-0.51l-0.59,-0.72l-0.2,-1.79l-0.46,-0.25l-1.1,0.25l-0.99,-1.06l-1.66,-0.16l-1.01,-0.96l-0.33,-0.85l-1.33,-0.6l-1.87,-1.7l1.47,-2.73l-0.44,-3.11l0.84,-1.01l1.52,-4.89l0.48,-0.48l-0.88,-1.69l0.4,-0.9l-0.6,-0.76l-2.01,-0.62l-0.47,-0.77l-0.61,-0.09l-0.64,0.73l-0.49,-0.17l-0.61,0.5l-1.34,-0.04l-0.63,0.73l-1.03,-0.76l0.19,-0.77l-0.32,-0.56l-0.62,0.0l-0.55,-0.81l-0.78,-0.14l-1.13,-0.76l-1.76,-0.26l-0.22,-7.05l-1.19,-2.73l-1.03,-4.67l-2.6,-5.47l-1.26,-5.47l1.71,-1.23Z" 
data-code="ob66" fill="#fdc689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"  cursor="pointer">
          <title>Loški potok</title></path> 
        </a>
      </g>
    </svg>
    <div class="d"></div>
    
  </div>
  <div class="c"></div>
  
</div>

Answer 2

您可以像这个一样使用flexbox

.a {
  height: 500px;
  width: 500px;
  background-color: lightblue;
  display: flex;
  flex-direction: row;
}
.e{
  flex: 300px;
  position: relative;
  height: 200px;
}
svg {
  height: 200px;
  width:100%;
  background-color: red; 
  float:left;
}
.c{
  height: 200px;
  background-color: orange; 
  flex: 200px;
}
.d {
  height: 100px;
  width: 100px;
  background-color: yellow; 
  position: absolute;
  bottom: 0;
  left: 0;  
}

    <div class="a">
      <div class="e">
        <svg  viewBox="0 0 920 620" preserveAspectRatio="xMaxYMax"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g fill="#fdc689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"  cursor="pointer" >
            <a xlink:href="#" > 
              <path d="M324.65 458.41l0.71,-0.12l1.72,2.31l0.23,0.92l1.47,0.68l1.5,-0.23l0.4,-0.77l1.44,-0.43l0.83,0.06l0.66,0.42l1.09,-1.02l1.13,0.02l0.71,0.86l0.55,-0.1l2.48,2.5l1.02,-0.49l0.76,0.58l1.21,0.05l0.79,-1.03l1.34,-0.03l0.62,-0.63l1.33,2.14l0.61,0.42l1.47,-0.07l0.55,0.62l0.21,1.49l0.88,0.8l-0.07,0.53l1.63,1.87l2.85,6.28l2.97,2.97l-1.29,2.39l0.3,0.59l12.27,1.54l0.89,0.87l3.92,0.39l0.39,3.32l0.5,0.34l1.88,-0.59l0.94,3.51l-0.69,0.73l-0.06,0.48l0.72,1.31l-1.74,2.97l0.2,1.05l-0.3,0.83l0.31,0.99l-0.55,0.5l-8.33,0.82l-0.25,0.67l4.59,4.76l2.46,8.71l-8.23,4.45l-0.09,0.67l0.5,0.42l-1.15,1.81l-1.11,-0.27l0.06,-0.96l-0.73,-0.3l-0.22,-0.79l-0.83,-0.55l-1.85,-0.44l-0.88,0.26l-0.59,-0.38l-0.64,0.34l-2.11,-0.88l-1.41,-0.02l-0.85,-1.71l-0.81,-0.71l-0.57,-1.08l-0.43,-0.15l-0.19,-0.76l-0.92,-0.64l-1.41,0.53l-0.38,-0.4l-0.38,-0.89l0.11,-0.51l-0.59,-0.72l-0.2,-1.79l-0.46,-0.25l-1.1,0.25l-0.99,-1.06l-1.66,-0.16l-1.01,-0.96l-0.33,-0.85l-1.33,-0.6l-1.87,-1.7l1.47,-2.73l-0.44,-3.11l0.84,-1.01l1.52,-4.89l0.48,-0.48l-0.88,-1.69l0.4,-0.9l-0.6,-0.76l-2.01,-0.62l-0.47,-0.77l-0.61,-0.09l-0.64,0.73l-0.49,-0.17l-0.61,0.5l-1.34,-0.04l-0.63,0.73l-1.03,-0.76l0.19,-0.77l-0.32,-0.56l-0.62,0.0l-0.55,-0.81l-0.78,-0.14l-1.13,-0.76l-1.76,-0.26l-0.22,-7.05l-1.19,-2.73l-1.03,-4.67l-2.6,-5.47l-1.26,-5.47l1.71,-1.23Z" 
              data-code="ob66" fill="#fdc689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"  cursor="pointer">
              <title>Loški potok</title></path> 
            </a>
            <div class="d">
            </div>        
          </g>
        </svg>
      </div>
      <div class="c">  </div>
    </div>