html - 在 DIV 中调整 SVG 的大小并且不保留纵横比

标签 html svg resize jquery-ui-resizable

如何通过 jQuery UI 调整 DIV 中的 SVG 图像?我想调整 DIV 的大小并且不在此 DIV 中保留 SVG 图像的纵横比。

jsFiddle example

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();

最佳答案

将 preserveAspectRatio="none"添加到 <svg>元素例如

<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">

关于html - 在 DIV 中调整 SVG 的大小并且不保留纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31293823/

相关文章:

html - 如何使底部导航栏居中?

javascript - 将 SVG 元素拖动到另一个 SVG 元素上

java - 在不损失质量的情况下调整图像大小

java - 无法调整 JButton 的大小

jquery - 选框仅适用于本地主机?

html - 在同一行对齐 html 输入

html - 使 css 背景图像 (svg) 响应式

javascript - 当 SVG 用作背景图像时,如何在单击时更改它的填充颜色?

java - 根据 JDialog 调整 JPanel 的大小

python - BeautifulSoup:将标签(包含其他标签)拆分为两个字符串