Question

SVG嵌入在具有一些尺寸（w1，h1）的对象标签中。用户可以缩放并平移到SVG中的任意区域，并希望保留该视图。我有旧维度的SVG转换。如何计算SVG的转换以保留新维度（w2，h2）的先前视图？这是一个示例HTML，SVG嵌入在object标签中在这个例子中，（w1，h1）是（100％，100％）和（w2，h2）可以是（50％，50％）

<html>
<body>
<object class="auto-capital-svg-content" data="1.svg" width="100%" height="100%" type="image/svg+xml">
</object>
</body>
</html>

以下是SVG示例

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" height="150" width="400" style="" >
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
    </linearGradient>
  </defs>
  <g id="viewport" transform="matrix(6,0,0,6,200,200)">
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
  </g>
</svg>

这就是我的想法：根据新/旧维度计算比例，以保持纵横比并缩放变换。但是这并没有考虑矩阵{a，b，c，d，tx，ty}中的翻译（tx，ty）。这里应该做什么？

新坐标系的等效SVG变换

0 个答案: