p:signature 的较小显示

Question

根据 this 文章，基础工作正常，但我正在尝试像这样显示 PrimeFaces p:signature SMALLER：

--->

当我尝试简单地更改签名的 width 和 height 时（在 CSS 中或直接像签名组件的属性），它显示小的签名组件，但签名本身是仍然是相同的大小，所以它没有显示，或者只显示其中的一部分：

我想这是因为签名是以绝对维度存储的..

如何将存储的签名显示得更小？

SVG: 根据 answer 关于这个主题，我尝试像这样显示生成的 SVG：

<h:outputText value="#{bean.toSvg(item.signature,600,20)}" escape="false"/>

问题还是一样，我无法调整 SVG 的大小

更新（解决方案）： 使用 viewBox 属性

public String toSvg(..)
{
  .. 
  sb.append(String.format("<svg width=\"%d\" height=\"%d\" viewBox=\"0 0 %d %d\" preserveAspectRatio=\"xMinYMin meet\" xmlns=\"http://www.w3.org/2000/svg\">\n", width/10, height/10, width, height));
  ..
}

Answer 1

我会将签名转换为 SVG（或 PNG），这样您就可以轻松地缩小它以便使用 CSS 显示。

另请参阅：

How to convert p:signature value to an image (or other serialised form)
https://primefaces.github.io/primefaces/8_0/#/components/signature?id=convert-to-binary

p:signature 的较小显示

Smaller display of p:signature

jsf

digital-signature

primefaces