Question

我想在没有绝对位置的情况下将两个加载的图像并排放置在svg中。我在容器和float: left或display: flex的帮助下尝试了这个位置。但它没有用。

这是我的代码：http://codepen.io/anon/pen/LWeBRv

提前致谢。

Answer 1

调整第一张图片的宽度，它们就适合了：

＆＃13;

#iconOne {
  width: 120px;
}

＆＃13;

 <svg width="200" height="200">
       <g>
            <image id="iconOne" width="30" height="30" xlink:href="iconOne.svg" />
            <image id="iconTwo" width="50" height="30" xlink:href="iconTwo.svg" />
        </g>
    </svg>

＆＃13;

否则，如果你想使用标准的HTML定位，你必须（据我所知）依赖于此，我的意思是，制作单独的HTML实体：

＆＃13;

.image {
  width: 70px;
}

＆＃13;

<svg class="image">
            <image id="iconOne" width="30" height="30" xlink:href="iconOne.svg" />
    </svg>
<svg class="image">
            <image id="iconTwo" width="50" height="30" xlink:href="iconTwo.svg" />
    </svg>
<svg class="image">
         <image id="iconThree" width="60" height="30" xlink:href="iconTwo.svg" />
    </svg>

＆＃13;

如何在svg中并排放置两个图像

1 个答案: