Question

我是CSS新手，继承了以下代码，将页脚添加到打印文档

@page {
  @bottom-right {
    content: counter(page) "("counter(pages)")";
    border-top:1mm #00a7d1 solid;
    width:100%;
  }

  @bottom-left {
    content: url(logo.jpg);
  }
}

我想将logo.jpg更改为SVG图像。只需更改URL即可，但生成的图形会跨越页面的整个宽度。

在样式表的另一部分中，可以像这样控制SVG的大小：

#logo {
  position:absolute;
  height:auto;
  width:52mm;
}

但是，在width内设置height或@bottom-left的值无效。如何在@page规则中控制SVG的大小？

修改这是<svg>根元素

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="233.21152mm"
   height="72.102554mm"
   viewBox="0 0 826.34002 255.48149"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="logo.svg">

Answer 1

我认为您无法直接在margin at-rule中设置尺寸。它由@page中的配置决定。虽然我还没有使用分页媒体规则，所以我对此并不是百分之百确定。

但是，请尝试将SVG中的width和height从当前的固定大小值（＆＃34; 233mm＆＃34;等）更改为"100%"。它应该允许SVG徽标正确缩放。

CSS：如何在页脚中控制SVG的大小

1 个答案: