html - SVG 坐标偏移

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" 使线适合框的对 Angular 线。