在打印过程中是否可以更改SVG圆的cx，cy和r？

问题描述

我有这个svg圈子：

<svg viewBox="0 0 10 10">
  <circle cx="5" cy="5" r="5"/>
</svg>

如果要打印网页，我想减小圆的尺寸。

是否存在实现这一目标的方法？

编辑

当我说“打印”时，是指同时打印页面的pdf并将页面打印在纸上。

编辑＃2

这就是我尝试使用@media打印的方法。

@media print {
          circle{
            height: 0.8vw;
            width: 0.8vw;
          }
}

解决方法

您可以使用 Lit 更改 SVG 属性：

const radius = 5;
svg`<svg viewBox="0 0 10 10">
  <circle id="circle" cx=${radius} cy=${radius} r=${radius}/>
</svg>`

您还可以使用 CSS 变量设置 SVG 形状属性：

:host {
    --prefix-radius: 10;
}

#circle {
    cy: var(--prefix-radius);
    cx: var(--prefix-radius);
    r: var(--prefix-radius);
}

@media print {
    #circle{
        --prefix-radius: 5;
    }
}

您可以缩放整个 SVG：

@media print {
    svg.shrinkOnPrint {
        height: 0.8vw;
        width: 0.8vw;
    }
}

最后你可以有多个版本，只显示相关的一个：

svg.forPrintOnly { display: none; }

@media print {
    svg:not(.forPrint) { display: none; }
    svg.forPrintOnly {
        display: inline-block;
    }
}

<svg>                      <!-- appears on screen but not print -->
<svg class="forPrint">     <!-- appears on screen & print -->
<svg class="forPrintOnly"> <!-- only show on print -->