对角线 SVG 描边

Question

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

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

对角线是 SVG 图像，但我要对这个 SVG 进行编码以使其具有响应性，因此它会在任何屏幕上以 1px 提醒，转到左下角并在同一位置遇到徽标, 就在 carl 的 '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>

Answer 1

为什么不直接将 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.

See the browser support. It's great!

对角线 SVG 描边

Diagonal SVG Stroke

css

svg

stroke