我正在尝试在SVG(300x300像素)中绘制一个矩形,并在父Rect(10x10像素)的每个角落中对齐4个较小的rects,但是每个小子rect都具有父rect的完整大小。
<svg width="300" height="300">
<svg height="10" width="10" />
<svg height="10" width="10" />
<svg height="10" width="10" />
<svg height="10" width="10" />
</svg>
您可以在此处查看我的结果:http://jsfiddle.net/8tY3b/
如果我将内部SVG Elements的宽度或高度设置为10px,它将适用于除右下角之外的每个边缘。
有没有办法将子元素与父元素的右下角对齐?
答案 0 :(得分:0)
您想嵌入svg元素还是绘制矩形?如果您对后者感到满意,请转到:
<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align -->
<!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:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="15cm" height="15cm"
viewBox="0 0 300 300"
preserveAspectRatio="none"
style="background-color:white; border: solid 1px black;"
>
<rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="0" y="0"/>
<rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="290" y="0"/>
<rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="0" y="290"/>
<rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="290" y="290"/>
</svg>
属性none
的值preserveAspectRatio
允许任意缩放。