相关疑难解决方法(0)

我希望能够将SVG元素上的笔触宽度设置为"像素感知",无论当前应用的缩放转换如何,都始终为1px宽.我知道这可能是不可能的,因为SVG的整个要点是与像素无关.

背景如下:

我有一个SVG元素,其viewBox和preserveAspectRatio属性设置.它看起来像这样

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

这意味着当我缩放该元素时,其中的实际形状会相应缩放(到目前为止一直很好).

如您所见,我已经设置了viewBox,以便原点位于中心.我想在该元素中绘制一个x轴和一个y轴,我这样做:

<line x1="-1000" x2="1000" y1="0" y2="0" />

再次,这很好.但理想情况下,此轴总是只有1px宽.当我缩放父svg元素时,我对轴越来越不感兴趣.

我搞砸了吗？

我有div预览框

HTML:

<div class="preview-content">PREVIEW</div>

CSS:

.preview-content {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
     font-size: 2em;
}

问:如何将对角线添加到div背景中,如图中所示

注意:尽可能使用CSS

先感谢您

在图像拉伸时,SVG中是否有一种方法可以绘制一条保持细线的线？

我正在使用SVG图像作为CSS背景,如下所示:

<svg ... preserveAspectRatio="none" viewBox="0 0 15 15">
  <line x1="0" y1="15" x2="15" y2="0"
        color="#000" stroke="#333" stroke-width="1" />
</svg> 

(对角线).我通过一个矩形元素拉伸这个图像,当元素更大时,线条变粗,但我需要一条始终很细的线条.

可能？像闪光灯中的"细"线一样.