html - 绝对定位的 DIV 内部的 SVG 绘图区域缩小

标签 html css svg

如何让蓝线连接内框的对 Angular 线(当前路径的宽度和高度都小于 10px)。

另一个问题是 SVG 路径似乎不是像素完美的。我通过使用 L 810 410 的路径数据手动增加了它的大小,并且该行向右下角移动。

<!DOCTYPE html>
<html>
<body>

<div style="margin-left: 100px; margin-top: 100px; width: 800px; height: 400px; border: 1px solid #ccc; position: relative;">
    <div style="position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; border: 1px solid #ccc; box-sizing: content-box;">
        <svg style="width: 100%; height: 100%;">
            <path d="M10 10 L 800 400" fill="none" stroke="blue" stroke-width="3" stroke-linecap="square"/>
        </svg>
    </div>

</div>

</body>
</html>

最佳答案

我对 SVG 不太了解,但我尝试用 d="M10 10 L 810 410"解决了你的问题,现在它完全对 Angular 连接了。

希望这对您有所帮助。

关于html - 绝对定位的 DIV 内部的 SVG 绘图区域缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35089979/

相关文章:

javascript - 如何使用 D3.js 在 SVG 圆周围绘制 0,45,90,135,180 度等的矩形

html - 在悬停时删除标题工具提示,但不在 HTML 中

html - 如何将元素的大小调整到完整的可见高度

javascript - Fabric.js loadSVGFromUrl 不显示多个导入的 SVGS

jquery - 如何复制图像并将其添加为其父背景图像?

html - 如何将下拉菜单添加到标题导航栏?

html - SVG <use xlink> 可以用在 CSS 背景图像中吗?

javascript - 手机浏览器怎么显示 'page zoom'

html - 背景大小卡在超过 100% 的值上?

android - 简单触摸或点击时未选择输入