堆栈内存溢出
  繁体   English   中英

如何在 Chrome 中使用 svg.js 缩放 svg？

[英]How to scale a svg with svg.js in Chrome?

 原文  2020-07-04 08:13:21  4   1    javascript/ google-chrome/ svg.js

问题描述

我想用 svg.js 缩放 SVG。 我创建了一个片段来创建一个矩形和一个 SVG。 一秒钟后，两者都被缩放。 在 firefox 中，rect 和 SVG 被缩放，在 chrome 中只有 rect 而不是 SVG。 为什么？

此片段显示了行为：

https://jsfiddle.net/rq0a9L5n/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.15/svg.js"></script>
  </head>
  <body onload="go();">
    <div id="canvasdiv"></div>
  </body>
</html>
<script>
  function go() {
    const paper = SVG().addTo("#canvasdiv");
    const rectangle = paper.rect(100, 100).fill("gray");
    const doggi = paper
      .nested()
      .svg(
        '<svg width="96px" height="96px" viewBox="0 -14.49 96 96" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-288.456 -192.331)"><path d="M336.456,193.307a12.651,12.651,0,0,0-5.248-.953c-5.773.437-14.711,2.99-18.05,7.485-4.852,6.533-10.925,34.569-9.7,44.368s21.567,15.152,33,15.152Z" fill="#f7dcc6"/><path d="M336.456,227.442s-6.963.544-11.455,5.522-12.853,10.983-11.967,16.74,2.82,12.191,13.121,8.572a42.352,42.352,0,0,0,10.3,1.083Z" fill="#d6af92"/><path d="M330.215,208.55c4.822,1.814,1.644,16.83,6.241,17.783V228.6s-6.887-.116-12.123,2.773c-3.766,2.078-9.745,1.4-11.228-6.913-.6-3.356,2.639-7.909,9.333-10.289C327.413,212.406,327.688,207.6,330.215,208.55Z" fill="#d6af92"/><path d="M331.208,233.046c-.072,1.706,5.248,3.4,5.248,3.4v-9.008S331.381,228.962,331.208,233.046Z" fill="#3d2a2e"/><path d="M336.456,227.442a13.362,13.362,0,0,0-3.552.768c-1.211.576-2.3,3.915-1.7,4.836s2.048.346,2.538,0-.853-2.994,0-2.878,1.58,3.914.732,4.145,1.978,2.137,1.978,2.137Z" fill="#4c383d"/><path d="M331,225.556c-.5-.967-4.083-7.948-10.012-7.948-4.962,0-7.953,5.764-7.953,6.856s2.042,6.224,7.077,6.857,7.622-4.267,8.847-4.4S331.952,227.4,331,225.556Z" fill="#bb8d6f"/><ellipse cx="6.648" cy="6.855" rx="6.648" ry="6.855" transform="translate(314.339 217.609)" fill="#4c383d"/><ellipse cx="4.014" cy="4.139" rx="4.014" ry="4.139" transform="translate(316.973 220.325)" fill="#3d2a2e"/><ellipse cx="1.239" cy="1.277" rx="1.239" ry="1.277" transform="translate(316.579 220.799)" fill="#fbfcfc"/><path d="M316.482,197.173s-6.513-.136-9.833,3.675-15.756,7.3-17.754,15.867c-2.262,9.7,4.671,19.47,10.348,25.234,7.566,7.683,6.768-17.148,11.493-27.355S316.482,197.173,316.482,197.173Z" fill="#3d2a2e"/><path d="M336.456,244.615a10.4,10.4,0,0,0-5.42,2.586c-3.963,3.67-9.194,5.852-12.387,4.083s-3.766-1.72-1.117.705,8.907,1.794,11.972,0,6.952-.841,6.952-.841Z" fill="#3d2a2e"/><path d="M336.456,248.508s-3.888-.79-5.42,1.81.5,7.363,5.42,7.363Z" fill="#f37777"/><path d="M288.895,216.715c-1.229,5.273.266,10.559,2.79,15.216-1.964-6.179,1.981-13.4,5.724-16.486,3.47-2.858,6.019-11.031,8.619-13.987C302.014,205.047,290.786,208.6,288.895,216.715Z" fill="#4c383d"/><path d="M336.456,193.307a12.651,12.651,0,0,1,5.248-.953c5.773.437,14.711,2.99,18.05,7.485,4.853,6.533,10.926,34.569,9.705,44.368s-21.567,15.152-33,15.152Z" fill="#f7dcc6"/><path d="M336.456,227.442s6.963.544,11.455,5.522,12.853,10.983,11.967,16.74-2.82,12.191-13.121,8.572a42.352,42.352,0,0,1-10.3,1.083Z" fill="#d6af92"/><path d="M342.7,208.55c-4.822,1.814-1.644,16.83-6.241,17.783V228.6s6.887-.116,12.123,2.773c3.767,2.078,9.745,1.4,11.229-6.913.6-3.356-2.64-7.909-9.333-10.289C345.5,212.406,345.224,207.6,342.7,208.55Z" fill="#d6af92"/><path d="M341.7,233.046c.072,1.706-5.248,3.4-5.248,3.4v-9.008S341.531,228.962,341.7,233.046Z" fill="#3d2a2e"/><path d="M336.456,227.442a13.362,13.362,0,0,1,3.552.768c1.211.576,2.3,3.915,1.7,4.836s-2.048.346-2.538,0,.853-2.994,0-2.878-1.58,3.914-.732,4.145-1.978,2.137-1.978,2.137Z" fill="#4c383d"/><path d="M341.913,225.556c.5-.967,4.083-7.948,10.012-7.948,4.963,0,7.953,5.764,7.953,6.856s-2.041,6.224-7.077,6.857-7.622-4.267-8.846-4.4S340.961,227.4,341.913,225.556Z" fill="#bb8d6f"/><ellipse cx="6.648" cy="6.855" rx="6.648" ry="6.855" transform="translate(345.277 217.609)" fill="#4c383d"/><ellipse cx="4.014" cy="4.139" rx="4.014" ry="4.139" transform="translate(347.911 220.325)" fill="#3d2a2e"/><ellipse cx="1.239" cy="1.277" rx="1.239" ry="1.277" transform="translate(353.855 220.799)" fill="#fbfcfc"/><path d="M356.43,197.173s6.513-.136,9.833,3.675,15.756,7.3,17.754,15.867c2.262,9.7-4.671,19.47-10.347,25.234-7.566,7.683-6.768-17.148-11.493-27.355S356.43,197.173,356.43,197.173Z" fill="#3d2a2e"/><path d="M336.456,244.615a10.4,10.4,0,0,1,5.42,2.586c3.963,3.67,9.2,5.852,12.387,4.083s3.767-1.72,1.117.705-8.907,1.794-11.971,0-6.953-.841-6.953-.841Z" fill="#3d2a2e"/><path d="M336.456,248.508s3.888-.79,5.42,1.81-.5,7.363-5.42,7.363Z" fill="#f37777"/><path d="M384.017,216.715c1.229,5.273-.266,10.559-2.789,15.216,1.963-6.179-1.981-13.4-5.724-16.486-3.47-2.858-6.02-11.031-8.62-13.987C370.9,205.047,382.126,208.6,384.017,216.715Z" fill="#4c383d"/></g></svg>'
      )
      .move(10, 10);
    setTimeout(function() {
      rectangle.scale(2, 2);
      doggi.scale(2, 2);
    }, 1000);
  }
</script>

1 个解决方案

解决方案1
 1 已采纳  2020-07-05 22:18:22

TL;DR ：svg 标签在 SVG 1.1 中不可转换，但在新的 SVG 2 规范中可转换。 此时浏览器对此功能有不同的支持。 这就是为什么它在某一点起作用而不在另一点起作用的原因。

If you want to scale a nested svg, put it into a group and scale the group or change the size of the svg and use the zoom() function (or directly change viewbox) to zoom into the svg.

其他一些需要考虑的事情：

  • 使用 html5 代替 xhtml
  • 写有效的html！！ （您的脚本标签必须将 go 放入正文或头部）
  • 摆脱 onload 并将您的脚本放在正文的末尾
  • nested的 function 创建一个新的嵌套<svg>元素。 在那个你导入一堆 svg 所以你最终得到<svg><svg>...</svg></svg>这可能不是你想要的

这是一个更好的版本：

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.15/svg.js"></script>
  </head>
  <body>
    <div id="canvasdiv"></div>
    <script>

const paper = SVG().addTo("#canvasdiv");
const rectangle = paper.rect(100, 100).fill("gray");
const doggi = SVG(
  '<svg width="96px" height="96px" viewBox="0 -14.49 96 96" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-288.456 -192.331)"><path d="M336.456,193.307a12.651,12.651,0,0,0-5.248-.953c-5.773.437-14.711,2.99-18.05,7.485-4.852,6.533-10.925,34.569-9.7,44.368s21.567,15.152,33,15.152Z" fill="#f7dcc6"/><path d="M336.456,227.442s-6.963.544-11.455,5.522-12.853,10.983-11.967,16.74,2.82,12.191,13.121,8.572a42.352,42.352,0,0,0,10.3,1.083Z" fill="#d6af92"/><path d="M330.215,208.55c4.822,1.814,1.644,16.83,6.241,17.783V228.6s-6.887-.116-12.123,2.773c-3.766,2.078-9.745,1.4-11.228-6.913-.6-3.356,2.639-7.909,9.333-10.289C327.413,212.406,327.688,207.6,330.215,208.55Z" fill="#d6af92"/><path d="M331.208,233.046c-.072,1.706,5.248,3.4,5.248,3.4v-9.008S331.381,228.962,331.208,233.046Z" fill="#3d2a2e"/><path d="M336.456,227.442a13.362,13.362,0,0,0-3.552.768c-1.211.576-2.3,3.915-1.7,4.836s2.048.346,2.538,0-.853-2.994,0-2.878,1.58,3.914.732,4.145,1.978,2.137,1.978,2.137Z" fill="#4c383d"/><path d="M331,225.556c-.5-.967-4.083-7.948-10.012-7.948-4.962,0-7.953,5.764-7.953,6.856s2.042,6.224,7.077,6.857,7.622-4.267,8.847-4.4S331.952,227.4,331,225.556Z" fill="#bb8d6f"/><ellipse cx="6.648" cy="6.855" rx="6.648" ry="6.855" transform="translate(314.339 217.609)" fill="#4c383d"/><ellipse cx="4.014" cy="4.139" rx="4.014" ry="4.139" transform="translate(316.973 220.325)" fill="#3d2a2e"/><ellipse cx="1.239" cy="1.277" rx="1.239" ry="1.277" transform="translate(316.579 220.799)" fill="#fbfcfc"/><path d="M316.482,197.173s-6.513-.136-9.833,3.675-15.756,7.3-17.754,15.867c-2.262,9.7,4.671,19.47,10.348,25.234,7.566,7.683,6.768-17.148,11.493-27.355S316.482,197.173,316.482,197.173Z" fill="#3d2a2e"/><path d="M336.456,244.615a10.4,10.4,0,0,0-5.42,2.586c-3.963,3.67-9.194,5.852-12.387,4.083s-3.766-1.72-1.117.705,8.907,1.794,11.972,0,6.952-.841,6.952-.841Z" fill="#3d2a2e"/><path d="M336.456,248.508s-3.888-.79-5.42,1.81.5,7.363,5.42,7.363Z" fill="#f37777"/><path d="M288.895,216.715c-1.229,5.273.266,10.559,2.79,15.216-1.964-6.179,1.981-13.4,5.724-16.486,3.47-2.858,6.019-11.031,8.619-13.987C302.014,205.047,290.786,208.6,288.895,216.715Z" fill="#4c383d"/><path d="M336.456,193.307a12.651,12.651,0,0,1,5.248-.953c5.773.437,14.711,2.99,18.05,7.485,4.853,6.533,10.926,34.569,9.705,44.368s-21.567,15.152-33,15.152Z" fill="#f7dcc6"/><path d="M336.456,227.442s6.963.544,11.455,5.522,12.853,10.983,11.967,16.74-2.82,12.191-13.121,8.572a42.352,42.352,0,0,1-10.3,1.083Z" fill="#d6af92"/><path d="M342.7,208.55c-4.822,1.814-1.644,16.83-6.241,17.783V228.6s6.887-.116,12.123,2.773c3.767,2.078,9.745,1.4,11.229-6.913.6-3.356-2.64-7.909-9.333-10.289C345.5,212.406,345.224,207.6,342.7,208.55Z" fill="#d6af92"/><path d="M341.7,233.046c.072,1.706-5.248,3.4-5.248,3.4v-9.008S341.531,228.962,341.7,233.046Z" fill="#3d2a2e"/><path d="M336.456,227.442a13.362,13.362,0,0,1,3.552.768c1.211.576,2.3,3.915,1.7,4.836s-2.048.346-2.538,0,.853-2.994,0-2.878-1.58,3.914-.732,4.145-1.978,2.137-1.978,2.137Z" fill="#4c383d"/><path d="M341.913,225.556c.5-.967,4.083-7.948,10.012-7.948,4.963,0,7.953,5.764,7.953,6.856s-2.041,6.224-7.077,6.857-7.622-4.267-8.846-4.4S340.961,227.4,341.913,225.556Z" fill="#bb8d6f"/><ellipse cx="6.648" cy="6.855" rx="6.648" ry="6.855" transform="translate(345.277 217.609)" fill="#4c383d"/><ellipse cx="4.014" cy="4.139" rx="4.014" ry="4.139" transform="translate(347.911 220.325)" fill="#3d2a2e"/><ellipse cx="1.239" cy="1.277" rx="1.239" ry="1.277" transform="translate(353.855 220.799)" fill="#fbfcfc"/><path d="M356.43,197.173s6.513-.136,9.833,3.675,15.756,7.3,17.754,15.867c2.262,9.7-4.671,19.47-10.347,25.234-7.566,7.683-6.768-17.148-11.493-27.355S356.43,197.173,356.43,197.173Z" fill="#3d2a2e"/><path d="M336.456,244.615a10.4,10.4,0,0,1,5.42,2.586c3.963,3.67,9.2,5.852,12.387,4.083s3.767-1.72,1.117.705-8.907,1.794-11.971,0-6.953-.841-6.953-.841Z" fill="#3d2a2e"/><path d="M336.456,248.508s3.888-.79,5.42,1.81-.5,7.363-5.42,7.363Z" fill="#f37777"/><path d="M384.017,216.715c1.229,5.273-.266,10.559-2.789,15.216,1.963-6.179-1.981-13.4-5.724-16.486-3.47-2.858-6.02-11.031-8.62-13.987C370.9,205.047,382.126,208.6,384.017,216.715Z" fill="#4c383d"/></g></svg>'
  )
  .addTo(paper)
  .move(10, 10);
  
setTimeout(function() {
  rectangle.scale(2, 2);
  doggi.scale(2, 2);
}, 1000);

    </script>
  </body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用SVG.js旋转渐变？ 如何将自定义事件添加到svg.js 如何使用svg.js绘制弧 svg.js bbox（）在scale（）之后返回相同的值 如何使用SVG.js为线设置动画 如何在svg.js的矩形中居中显示文本？ 如何在 Observable 笔记本上使用 svg.js svg.js缩放和移动/中心的奇怪交互 SVG.js 如何在HTML页面添加一个svg 如何通过javascript（svg.js）将文本附加到svg路径
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM