时间戳

首页 > 解决方案 > 对角线 SVG 行程

css - 对角线 SVG 行程

问题描述

目前我正在开发这个简单的网站：

https://carl-robertshaw1.superhi.com/

对角线是 SVG 图像，但我要对此 SVG 进行编码以使其具有响应性，因此它会在任何屏幕上以 1px 提醒，转到左下角并在同一位置与徽标相遇，就在 '卡尔的 C'。

我在这里看得很清楚，找不到任何可以帮助我的东西，任何人都可以帮忙。

目前，我的 SVG 图像设置如下：

.image1 {
    position: fixed;
    top: 0;
    left: 0;
    padding: 77px 230px 0 0;
}


.parent {
  position: relative;
  top: 0;
  left: 0;
  color: #ffffff;
}


<div class="parent">
    <img class="image1" src='carl_line_mid.svg'>
    </div>

标签： csssvgstroke

解决方案

为什么不直接将 SVG 元素插入 HTML DOM？

尝试：

<div class="parent">
  <svg class="image1" style="height: 100%; width: 100%;">
    <line x1="100%" y1="0" x2="0" y2="100%" style="fill:none; stroke:#fff; stroke-width:1px;"></line>
  </svg>
</div>

我对图像进行了一些调整。您可以通过 style 属性更改 svg 的大小（当前为容器的 100%），或者删除 style 属性并使用 CSS 设置。线的宽度将保持不变1px。

请参阅浏览器支持。这很棒！

推荐阅读