在DIV中调整SVG大小并不保持纵横比

Question

如何使用jQuery UI来调整DIV中的SVG图像大小？我想调整DIV的大小并且不保留SVG图像在该DIV中的纵横比。 jsFiddle示例 HTML

   <div style="width: 100px; height:100px; border: 1px solid black;">
      <svg style="width:100%; height:100%; " version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340.156px" height="340.152px" viewBox="0 0 340.156 340.152" enable-background="new 0 0 340.156 340.152" xml:space="preserve">
          <path fill="#2121ed" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-opacity="0" class="path_vector_1" d="M340.156,170.078c0,93.926-76.146,170.074-170.077,170.074C76.146,340.152,0,264.004,0,170.078
    C0,76.146,76.147,0,170.079,0C264.011,0,340.156,76.146,340.156,170.078z">
          </path>
      </svg>
  </div>

jQuery

$('div').resizable();

- Patrik

Answer 1

在 <svg> 元素上添加 preserveAspectRatio="none" 属性，例如：

<svg style="width:100%; height:100%; " version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340.156px" height="340.152px" viewBox="0 0 340.156 340.152" preserveAspectRatio="none" enable-background="new 0 0 340.156 340.152" xml:space="preserve">

- Robert Longson

---

你可能还需要将 position: relative 添加到父级容器，以使 SVG 的 height:100% 生效。 - Vincente

同样重要的是："由于SVG图像的纵横比由viewBox属性定义，如果未设置此属性，则preserveAspectRatio属性无效"。 - Viktor Borítás