3

我正在尝试在 SVG（300x300 像素）中绘制一个矩形，并在父矩形（10x10 像素）的每个角对齐 4 个较小的矩形，但每个小的子矩形都具有父矩形的完整大小。

<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 元素的宽度或高度设置为 10px，它将适用于除右下角之外的所有边缘。

有没有办法将子元素对齐到其父元素的右下角？

4

1 回答 1

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允许任意缩放。

于 2013-04-23T12:59:50.467 回答