调整SVG圆角矩形的大小并保留纵横比

Question

我正在尝试定义一个SVG圆角矩形，我稍后需要使用 jointjs resize函数调整大小，该函数使用标准SVG transform =“scale（）”。在这种情况下，缩放功能会改变一切。

有没有办法在不触及rx和ry属性的情况下调整圆角矩形的大小？ 下面的代码通过使用一些缩放函数（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>  

Answer 1

不要缩放它，调整大小。使用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)

结果：

它使用'特殊属性'： https://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.attributes.refWidth

Answer 2

如果您的形状为Vectorizer object（可通过node属性访问SVG DOM元素），例如：

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>

然后，您还可以将该矩形作为Vectorizer对象访问，并以这种方式更改其属性：

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和vel.attr是Vectorizer API中的函数。