如果你看Fiddle。蓝色方块是一个容器width:500px heigh:500px。红色是div，svg为300x200px，橙色为div 200x199px，黄色为div 100x100px。如果你看一下代码，黄色元素应该在红色div中，橙色div在红色方块的右边，就像this fiddle里面没有svg一样。怎么能实现这一目标？如果可能的话。
答案 0 :(得分：0)
您可以像这样使用 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>
答案 1 :(得分：0)
您不能将<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>