Css 将SVG与其他HTML元素垂直对齐

我需要将SVG元素与行/span中的另一个元素对齐（向右），但找不到正确的公式。除非我做错了什么，否则当SVG不在左边时，这个问题的答案就会失败

这是一个例子。谢谢你的帮助

<div style="border: 1px solid black; height: 100px; width: 200px; vertical-align:top;">
    <span height=100 float=left><p>text on left</p></span>
    <span height=100 float=right>
        <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin">
            <rect x="0" y="0" width="100" height="100" style="fill: red;" />
        </svg>
    </span>
</div>

左边的文字

我已经设法让您的跨距在这里彼此相邻：

以下是最终代码：

HTML:

---

现在解决了！请看一下答案和最新的提琴。谢谢你！但奇怪的是，在这个模型中，rect color的html赋值只能通过css工作。我有点担心这可能导致其他SVG属性失败，但情况可能并非如此。在HTML中嵌入样式妨碍了我的思考，因此我将两者分开。你是对的，没有。我一定是打错了什么。再次感谢你的帮助Chandranshu你应该为此得到一块饼干：-）谢谢！我试图为动态添加的jQuery弹出div快速勾选一个复选框，而不是HTML5画布绘制（没有圆角rect功能），我只是制作一个圆角边框并用svg绘制一个X，但我不知道如何使X与边框顶部对齐；有一个缺口。在添加viewbox语句（而不仅仅是宽度和高度）之后，它工作了。（对于这件简单的事情，我不需要preserveSpectratio属性）。节省了我很多时间！

<div>
    <span class="flt"><p>text on left</p></span>
    <span class="frt">
        <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin">
            <rect x="0" y="0" width="100" height="100"/>
        </svg>
    </span>
</div>

div {
    border: 1px solid black;
    height: 100px; 
    width:  200px;
    vertical-align: top;
}

span {
    width: 100px;
    height: 100px;
}

.flt {
    float: left;
}

.frt {
    float: right;
}

rect {
    fill: red;
}