如何对齐SVG文档中的对象? [英] How to align an object in SVG document?

问题描述

有没有办法在 SVG 中对齐一个对象(比如矩形)，相对于组或文档的右边框?当我增加整个文档宽度时，我希望对象保持其大小，但增加 X 位置以保持右对齐.

Is there a way to align an object (say, rect) in SVG, relative to the right border of a group or the document? I want the object to keep its size, when I increase the whole document width, but increase X position to stay right-aligned.

问候，

推荐答案

我一直在寻找一种方法来浮动 <g> 元素在宽度为 100% 的 svg 文件右侧.所以一个人可以缩放图像和我的 <g> 元素会粘在右边而不会被缩放.

I was looking for a way to float a < g> element to the right of a svg file with width=100%. So one could scale the image and my < g> element would stick to the right without beeing scaled.

这是我发现的:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" 
    baseProfile="full" 
    width="100%" 
    height="100%"> 

    <svg viewBox="0 0 300 300" width="100%" height="300px" 
        preserveAspectRatio="xMaxYMin meet"> 
        <g transform="skewX(45)" style="fill:red;">
            <rect x="0" y="0" height="100%" width="20px" /> 
            <rect x="270" y="0" height="100%" width="20px" /> 
        </g> 
    </svg> 
</svg> 

诀窍是使用 <svg> 标签，你放置元素的地方，你想粘在右边框上.然后你告诉 <svg>-tag 不缩放内部元素并移动它们，以便 x 值处于最大值而 y 值处于最小值 (xMaxYMin)

The trick is to use a < svg> tag, where you place your element, that you want to stick to the right border. Then you tell the < svg>-tag not to scale the inner elements and to move them so, that the x values are at their maximum and y at minimum (xMaxYMin)

preserveAspectRatio="xMaxYMin meet"

以同样的方式，您可以将其居中...

In the same way you can center it...

来源:http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

这篇关于如何对齐SVG文档中的对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！