小编Rún*_*erg的帖子

我想在我的网站上放一个由脚本触发的简单加载指示器.它应该是一个简单的圆弧,它有一个渐变,并在用户等待时旋转.我还没有尝试动画部分,但现在却陷入了静态样式.这是我到目前为止所得到的:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
        width="100" height="100">
        <defs>
            <linearGradient id="grad1">
                <stop offset="0%" stop-color="red"/>
                <stop offset="100%" stop-color="red" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M50 10  A40 40 0 1 0 90 50"
            stroke="url(#grad1)" stroke-width="10" fill="transparent"/>
    </svg>

它绘制弧线,从顶部边缘逆时针到右边缘(270°),但梯度是错误的.而不是跟随路径使得开始(顶部边缘,0°)是不透明的并且末端(右边缘,270°)是透明的,所得到的弧形笔划的图像在屏幕空间中从左到右着色.

如何使渐变跟随我的弧形路径？

我有以下要求来设计打印布局以生成 pdf，我尝试了各种选项，包括 CSS flex 和 grid，但没有太大成功。

要求是：

• 以 3 页列式布局显示内容 - 类似于报纸风格。
• 如果一列包含太多信息，那么它会“流入”右侧的下一列。
• 一旦我们达到 3 列的限制，那么第 4 列应该移动到下一行而不是该列（如下一页）。此外，我们不知道总共有多少列或行。

我能够达到第一个要求。但是，我找不到根据 div 宽度（或页面宽度）打破 CSS 中第三列的方法。

我正在尝试以下代码：

.newspaper {
  max-height: 500px;
   column-count: 3; 
  
}
.article {
  break-inside: avoid;
  page-break-after: always;        
}
.chart {
  background: #ccc;
  height: 200px;
}

 <div class="newspaper">
      <div class="article">
        <h1>Article 1</h1>
        <div class="chart">Chart 1</div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat. Ut wisi enim ad …

我目前正在使用SVG渐变来为路径应用淡出效果.这允许路径在x0处以100%不透明度开始,在x1处淡出为0%,无论它们应用于应用于的特定路径:

<svg>
    <linearGradient id="gradient_to_transparent" x1="0%" x2="100%">
        <stop offset="0" stop-opacity="1"></stop>
        <stop offset="1" stop-opacity="0"></stop>
    </linearGradient>

    <path
        d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
        style="stroke:url(#gradient_to_transparent);"
    />
</svg>

这适用于路径的笔触样式:

<svg>
    <linearGradient id="gradient_to_transparent" x1="0%" x2="100%">
        <stop offset="0" stop-opacity="1"></stop>
        <stop offset="1" stop-opacity="0"></stop>
    </linearGradient>

    <path
        d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
        style="stroke:url(#gradient_to_transparent);"
    />
</svg>

但问题是,通过使用笔触样式,我无法应用其他笔触样式,并且默认为黑色.我想要的是使用我想要的任何颜色设置笔划样式,然后将渐变应用于笔触不透明度或应用SVG过滤器来创建淡出效果.我尝试搞乱SVG过滤器并使用feComponentTransfer和feFuncA,但是无法获得正常工作的东西.

需要针对每个路径单独计算笔划颜色.因此,在渐变中设置颜色的解决方案不会很好地扩展.

制作不可见内容的当前方法（即在屏幕上隐藏文本，但可将其提供给屏幕阅读器）似乎颇为棘手。目前，引导程序具有一个sr-only定义为的mixin：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

我的问题是：使用仅屏幕的简单媒体查询是否可以更轻松地完成此操作？我特别想知道是否可以接受以下媒体查询和规则进行隐藏（例如，以下应用中的标题）：

@media only screen {
  h2 {
    display: none;
  }
}

换句话说：媒体查询是否@media only screen适用于屏幕阅读器和屏幕？

扩展此代码段，以查看可能有用的地方。

const sections = document.querySelectorAll('section');
const anchors = document.querySelectorAll('nav a');

window.addEventListener('hashchange', ({ newURL }) => {
  const { hash } = new URL(newURL);
  
  sections.forEach(section => {
    if (section.matches(hash)) {
      section.style.display = null;
    } else {
      section.style.display = …