stackoom
  简体   繁体   中英

How to scale a svg with svg.js in Chrome?

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

Question

I want to scale an SVG with svg.js. I created a snippet that creates a rect and an SVG. After one second, both are scaled. In firefox, the rect and the SVG are scaled, in chrome only the rect but not the SVG. Why?

This snippet shows the behavior:

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 answers

solution1
 1 ACCPTED  2020-07-05 22:18:22

TL;DR : The svg tag was not transformable in SVG 1.1 and is transformable in the new SVG 2 specs. Browsers have different support for this feature at this point. Thats why it works at one point and not at the other.

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.

A few other things to consider:

  • use html5 instead of xhtml
  • write valid html!! (your script tags have to go into body or head)
  • get rid of the onload and put your scripts at the end of the body instead
  • the nested function creates a new nested <svg> element. In THAT you import a bunch of svg so you end up with <svg><svg>...</svg></svg> which is maybe not what you want

Here is a better version:

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to rotate gradient using SVG.js? how to add custom events to svg.js How to draw arc using svg.js svg.js bbox() returns the same values after scale() How to animate lines using SVG.js How to center text in the rectangle in svg.js? How to use svg.js on Observable notebook svg.js strange interaction of scale and move/center SVG.js How do I add an svg to the HTML page how to append text to svg path via javascript(svg.js)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM