Question

我正在使用Imagemagick从预先计算的svg生成图像。 svg来自编译从我们构建的编辑器中捕获的一些信息。在编辑器上，我们使用CSS样式预览实时更改。

现在，当我们要渲染实际图像时，我们将获取基本信息以生成实际的svg，然后使用imagemagick库将其转换为平面图像。

除使用svg模式实现css背景样式的部分外，其他所有内容都可以完美实现。下面是CSS代码

background-repeat: repeat;
background-size: cover;
background-position: -134px -2px;

下面是生成的svg的示例

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
        <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" overflow="visible" fill="#000">
            <defs>
                <pattern id="bg_40b043e9944a4239b118e0b938054afb" x="-67%" y="-1%" width="100%" height="100%">
                <image preserveAspectRatio="xMinYMin slice" width="200" height="200" xlink:href="imagedata" />
                </pattern>
            </defs><rect width="100%" height="100%" fill="url(#bg_40b043e9944a4239b118e0b938054afb)" /></svg>

要考虑的细节

父级SVG为200x200
原始背景位置为x：-134px和y：-2px，但分别转换为百分比，分别为-67％和-1％。
没有定位，一切就完美了。

考虑到上述情况，我认为问题出在图案图像x，y偏移（我想）和宽度/高度上。以下是背景的svg和css版本的输出

从svg渲染的图像 Rendered image from svg

带有CSS的html版本的快照。 Snapshot of the html version with css 用于背景的图像 The image used for the background

第二个结果是我们要始终实现的目标。

用于生成第一张图片的完整svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
        <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" overflow="visible" fill="#000">
        <defs><pattern id="bg_40b043e9944a4239b118e0b938054afb" x="-67%" y="-1%" width="100%" height="100%"><image preserveAspectRatio="xMinYMin slice" width="200" height="200" xlink:href="https://i.stack.imgur.com/YHz1i.jpg"  /></pattern></defs><svg preserveAspectRatio="none" viewBox="0 0 200 200" x="0%" y="0%"><g opacity="1" fill-opacity="1" fill="url(#bg_40b043e9944a4239b118e0b938054afb)" stroke="none" stroke-width="0" stroke-dasharray="0" stroke-dashoffset="0"><rect width="100%" height="100%"   /><svg class="layer" overflow="visible" preserveAspectRatio="none" id="layer_1535228794723_0887552009010049"  width="160.4065" height="38.7969" x="16.75" y="66"><g id="translateLayer" ><g id="effectLayer" fill="#000" stroke="#c01d1d" stroke-width="2" stroke-dasharray="1" stroke-linecap="butt" stroke-linejoin="round"><svg width="100%" height="100%" viewBox="0 -26.09375 144.59375 29.6875" preserveAspectRatio="none" overflow="hidden"><g  font-size="25" font-family="ABeeZee" font-style="Normal" font-stretch="Normal" font-weight="400"><text y="-3"><tspan x="0">T</tspan><tspan x="14">e</tspan><tspan x="27">x</tspan><tspan x="40">t</tspan><tspan x="50"> </tspan><tspan x="57">o</tspan><tspan x="72">k</tspan><tspan x="85"> </tspan><tspan x="92">h</tspan><tspan x="107">e</tspan><tspan x="121">r</tspan><tspan x="131">e</tspan></text></g></svg></g></g></svg></g></svg></svg>

感谢您的帮助！

Answer 1

只有明确输入背景图像的大小，您才能实现所需的效果。 CSS可以沿其固有尺寸平铺图像，因为图像本身就是其主题。在SVG中，图案是图像的父级，并且图块的大小与图像的大小独立设置。

第二个复杂性来自以下事实：width和height的百分数与引用<rect>的宽度和高度有关。和100％都导致图块具有与rect相同的大小。这也意味着，无论您如何设置，图块的宽高比与 referencing 元素（而不是所包含的图像）的高宽比都有固定的关系。

您需要为图案保留图像设置的纵横比。最稳定的方法是使用用户空间坐标，因为<rect>的高宽比更改时，百分比总是会更改。

设置patternUnits="userSpaceOnUse"，保留图像的原始大小（图像偏移量需要相应缩放），然后您需要设置patternTransform=scale(...)以使图案图块大小适合您的{{1 }}的方式<rect>。

cover

（这实际上与您的CSS参考所得到的结果相同。）

实现SVG版本的CSS Background-size：cover无法正常工作

1 个答案: