CODEWITHSUNDEEP
svgjointjs
Milan
Milan

Reputation: 1

Resizing SVG rounded rectangle and preserving aspect ratio

I am trying to define an SVG rounded rectangle that I need later resize using jointjs resize function which uses standard SVG transform="scale()". In this case scale function changes everything.

Is there a way to resize rounded rectangle shape without touching rx and ry attributes? Code bellow shows what I would like to achieve by using some scaling functions (Desired).

<svg xmlns="http://www.w3.org/2000/svg" >
  <!-- Original -->
  <rect x="10" y="0" rx="10" ry="10" height="50" width="50"/> 
  <!-- Scaled -->
  <rect x="10" y="50" rx="10" ry="10" height="50" width="50" transform="scale(2)"/> 
  <!-- Desired -->
  <rect x="10" y="250" rx="10" ry="10" height="100" width="100" /> 
</svg>

Upvotes: 0

Views: 1597

Answers (2)

vt.
vt.

Reputation: 1428

Don't scale it, resize it. It's pretty easy with jointjs:

var rounded = joint.dia.Element.define('basic.Rounded',
    {
        attrs: {
            rect: {
                fill: 'black',
                rx: 10,
                ry: 10,
                // bind the width and height of the DOM element to the shape size
                refWidth: '100%',
                refHeight: '100%'
            }
        }
    },
    {
        markup: '<g class="rotatable"><rect/></g>',
    });


// create instance variations
// I.
new rounded().size(100, 100).position(20, 20).addTo(graph);

// II.
new joint.shapes.basic.Rounded().size(200, 200).position(150, 150).addTo(graph)

Result:

enter image description here

it uses 'special attributes': https://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.attributes.refWidth

Upvotes: 1

CPHPython
CPHPython

Reputation: 13719

If you have the shape as a Vectorizer object (where the SVG DOM element is accessible through the node property), e.g.:

var vel = V('<svg><rect x="10" y="0" rx="10" ry="10" height="50" width="50"/></svg>');
console.log(vel.node);
// <svg id="v-NUM"><rect x="10" y="0" rx="10" ry="10" height="50" width="50"/></svg>

You can then also access the rectangle as a Vectorizer object and change its properties this way:

var velRect = V(vel.node.childNodes[0]);
velRect.scale(1).attr('y', 250);
console.log(vel.node);
// <svg id="v-NUM">
//   <rect x="10" y="250" rx="10" ry="10" height="50" width="50" transform="scale(1,1)"/>
// </svg>

vel.scale and vel.attr are functions from the Vectorizer API.

Upvotes: 0

Related Questions