如何调整在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.

问候，

推荐答案

我一直在寻找一种方式来飘起了＆LT; g>的元素宽度= 100％SVG文件的权利。 因此，人们可以缩放图片和我的＆LT; g>的元素将坚持正确的不beeing缩放。

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> 

诀窍是使用＆LT; SVG>标签，在那里你把你的元素，要坚持正确的边界。那你告诉的＆lt; 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...

来源： <一href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute">http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

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