Question

我正在尝试将svg放入div中。 svg包含单个路径。我认为，我已经正确设置了viewBox和preserveAspectRatio，但是路径的一部分（应该完全适合svg）是在viewBox之外绘制的。这是the fiddle，这是代码：

html：

<div class='sparkline' class="ng-isolate-scope">
    <svg viewBox="1 1 10 10" preserveAspectRatio="none">
        <path d="M0,10L5,5L10,0"></path>
    </svg>
</div>

css：

path {
    stroke: blue;
    stroke-width: 0.2;
    fill: none;
}

.sparkline{
    width: 200px;
    height: 200px;
    position:absolute;
    top:0px;
    left:0px;
    border: 1px solid black;
    margin: 20px;
}

svg{
    width:100%;
    height:100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

我认为没有理由将线移到左边，我怎么能克服这个？

Answer 1

您的代码按预期工作，但可能包含拼写错误。如果viewBox定义在1和10之间，则X或/和Y中的0行应该从框中移开。

使用viewBox="0 0 10 10"将线条装入方框的对角线。

SVG坐标移位

1 个答案: