SVG выровнять прямоугольник по правому нижнему углу родительского элемента

я пытаюсь нарисовать прямоугольник в SVG (300x300 пикселей) и выровнять 4 меньших прямоугольника в каждом углу родительского прямоугольника (10x10 пикселей), но каждый маленький дочерний прямоугольник имеет полный размер родительского прямоугольника.

<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 на 10 пикселей, они будут работать со всеми краями, кроме нижнего правого.

Есть ли способ выровнять дочерний элемент по нижнему правому краю его родительского элемента?


svg html alignment rect
person xbteQuiLa    schedule 23.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы хотите встроить элементы 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 допускает произвольное масштабирование.

person collapsar    schedule 23.04.2013
comment
Спасибо, я хочу рисовать прямоугольники, но забыл упомянуть, что мне нужно свободно масштабировать внешний элемент. Он не должен быть зафиксирован на определенном размере. Я думал, что должен быть способ изменить только размер внешнего элемента, а внутренние прямоугольники сохранят свое положение в углах без написания сценариев. - person xbteQuiLa; 23.04.2013
comment
вы можете масштабировать контейнер svg в соответствии с вашими потребностями, изменив его атрибуты width и height. содержание будет следовать соответственно. в том же духе вы можете определить группы элементов (например, 1 большой прямоугольник с 4 маленькими прямоугольниками, по одному в каждом углу) в их индивидуальной системе координат и расположить/масштабировать его с помощью соответствующего преобразования (treansformattribute; не является частью примера кода) . - person collapsar; 23.04.2013
comment
Я попробую это. Сохраняет ли этот способ размер внутренних прямоугольников? Они должны оставаться в размере 10px. - person xbteQuiLa; 23.04.2013