SVG中图像分辨率的通用解决方案答案

【问题标题】：Generic solution for resolution of image in SVGSVG中图像分辨率的通用解决方案
【发布时间】：2010-11-26 17:50:10
【问题描述】：

我有一个 xml 文件，我需要在 pdf 文件中进行可视化。我使用 xslt 在 pdf 中进行转换和 svg 图像。

svg 最终会绘制一些信息并显示一个 tiff 图像，其路径和分辨率在 xml 文件中。问题是图像可以具有不同的分辨率，我需要将它们放入相同的盒装区域。我确实有这个分辨率，我让它适用于两种不同的分辨率，但第三种分辨率不起作用。所以我需要的是一个更通用的解决方案。

目前我有以下代码可以在 svg 中绘制 tiff 图像：

<!-- Draw the tiff image -->
<svg:g transform="translate({$svg_image_width_first},
                            {$svg_image_height_first})">
    <svg:g transform="rotate({$tiff_rotation})">
        <svg:g transform="scale({$scale_x} 1)">
            <svg:image xlink:href="{$xml_bitmap_path}"
                                x="{$tiff_height_offset}"
                                y="{$tiff_width_offset}"
                                width="{$svg_image_height}"
                                height="{$svg_image_width}">
                <svg:title>Front Image</svg:title>
            </svg:image>
        </svg:g>  
    </svg:g>
</svg:g>

我发现我需要对缩放做一些事情，所以我保留 y 缩放不变并相应地改变 x 缩放：

<xsl:variable name="scale_x" select="$horizontal_resolution div $vertical_resolution"/>

由于缩放，svg 的视图发生了变化，我需要更改 tiff_height_offset 变量以应对比例的变化：

<!-- After rotation place of the image should be corrected-->
<xsl:variable name="tiff_height_offset">
    <xsl:choose>
        <xsl:when test="$tiff_rotation = '-90'">
            <xsl:value-of select="0 - (($svg_image_height + ($svg_image_height * (1 div $scale_x )))div $scale_x)"/>
        </xsl:when>
        <xsl:otherwise>
            <xsl:value-of select="0"/>
        </xsl:otherwise>
    </xsl:choose>
</xsl:variable>

因此，这些代码似乎适用于某些解决方案，但并非适用于所有解决方案。我希望有人能给我一个解决方案或提示，让我知道如何使这个通用解决方案适用于各种分辨率。

【问题讨论】：

标签： xslt graphics svg visualization

【解决方案1】：

在对问题进行了广泛深入的研究后，我找到了解决方案。首先我发现旋转也改变了 vie，所以宽度变成了高度等。所以我不需要在 x 方向上缩放，而是在 y 方向上：

<xsl:variable name="scale_y" select="$horizontal_resolution div $vertical_resolution"/>

而且我不需要根据比例改变高度而是宽度：

<xsl:variable name="tiff_width_offset">
  <xsl:choose>
    <xsl:when test="$tiff_rotation = '90'">
      <xsl:value-of select="(0 - $svg_image_width) * $scale_y" />
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="0"/>
    </xsl:otherwise>
  </xsl:choose>  
</xsl:variable>

所以图像的绘制现在看起来像这样：

<svg:g transform="translate({$svg_image_width_first}, {$svg_image_height_first})">
  <svg:g transform="rotate({$tiff_rotation})">
    <svg:image xlink:href="{$xml_bitmap_path}"
                        x="{$tiff_height_offset}"
                        y="{$tiff_width_offset}"
                        width="{$svg_image_height}"
                        height="{$svg_image_width * $scale_y}"
                        transform="scale(1 {1 div $scale_y})" >
      <svg:title>Front Image</svg:title>
    </svg:image> 
  </svg:g>
</svg:g>

现在我可以理解所有的计算了，我用几种分辨率对其进行了测试。

【讨论】：