Log in / Register

Forum › How do I...?

How do I set inline SVG in the Footer?

vgvgvg
Hello everyone,

I have an inline Html svg that i want to display in the footer. Is that possible with prince? This is what my LLM suggested but it doesnt seem to be working


@bottom-center {
content: element(qrCodeFooter);
}


<body>
<div class="qr-container">
<div class="artifact">
{{ footer.qrcode | string.strip }}
</div>

.qr-container {
position: running(qrCodeFooter) !important;
background: red !important;
border: 5px solid blue !important;
}



markbrown
> I have an inline Html svg that i want to display in the footer. Is that possible with prince?

Yes, here's an example:
<style>
@page {
    @bottom-center { content: element(qrCodeFooter) }
}
.qr-container {
    position: running(qrCodeFooter);
    text-align: center;
}
</style>
<div class="qr-container">
<svg width="20" height="20"><circle cx="10" cy="10" r="8" fill="green"/></svg>
</div>


The `@bottom-center` rule needs to be inside a `@page` rule.