带有坐标的xsl-fo外部图形中的区域属性

Question

我有一个要求，我需要使用xsl-fo描绘图像，用户应该能够在图像的文本/特定位置内单击。为了进一步解释，

• 我有一张图片
• 它包含文字
• 我有文本出现位置的坐标，需要为这些坐标提供超链接。

因此，当我点击文本时，我应该能够遍历PDF文档中的另一个位置。

我尝试使用<area>标记提及<fo:block>中的坐标，但它不起作用。 我的Fo结构如下：

<fo:block> <fo:external-graphic content-width="scale-to-fit" content-height="100%" width="100%" src="figures/test.png"/><area shape="rect" coords="148,147,195,162" <fo:basic-link>xyz</fo:basic-link></area>
</fo:block>

如果有人尝试过这样的事情并帮助我，你能告诉我吗？

Answer 1

虽然XSL-FO 不有图像映射（类似于HTML中的MAP元素），但可以使用嵌入式SVG文档达到同样的效果。

看一下这个例子：

<fo:block>
    <fo:instream-foreign-object>
        <svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <image x="0" y="0" width="5" height="3" xlink:href="image.png"/>
            <a xlink:href="http://www.w3.org">
                <rect x="1" y="2" width="3" height="1" 
                      fill="#AAFFFF" stroke="none" opacity="0"/>
            </a>
        </svg>
    </fo:instream-foreign-object>
</fo:block>

在svg文档中：

• image元素放置位图图像，具有与文档viewBox相同的大小
• a元素定义链接目标
• rect内的a元素定义了可点击区域

我使用FOP 2.1对此示例进行了测试，并且可以使用警告：

• 为了使可点击的矩形完全透明，我使用了opacity="0";我尝试使用fill="none" stroke="none"，但这不起作用，可能是因为矩形被完全丢弃/忽略没有任何可见标记
• 即使在SVG中使用ellipse元素，PDF中的可点击区域也是矩形的

Answer 2

所有XSL-FO方法是将fo:external-graphic放入具有指定宽度和高度的fo:inline-container或fo:block-container内。这样，热点可以是fo:block-container，相对于其包含fo:inline-container / fo:block-container的参考区域而言。

此示例将热点添加到嵌入式图像。以下来自Antenna House GUI的屏幕截图显示了标尺，因此您可以看到热点的位置和大小正确。 （添加border和background属性只是为了使这一点显而易见，您不太可能需要这些属性。）

<fo:block text-align="center">
  <fo:inline-container width="200px" height="200px"
                       border="thin solid silver">
  <fo:block text-depth="0" line-height="0" font-size="0">
    <fo:external-graphic
        content-width="scale-to-fit"
        content-height="100%" width="100%"
        src="logo-antenna-200x200.png" />
  </fo:block>
  <fo:block-container
      position="absolute"
      left="148px"
      top="147px"
      width="47px"
      height="15px">
    <fo:block>
      <fo:basic-link internal-destination="xyz">
        <fo:block-container height="100%" width="100%"
                            background-color="magenta" />
      </fo:basic-link>
    </fo:block>
  </fo:block-container>
  </fo:inline-container>
</fo:block>