svg 自动缩放，在最终用户分辨率之间固定画布大小

Question

我有一个 Power BI，我正在使用 HTML 内容视觉对象生成 .svg 图像。默认情况下，画布为 1280x720 以实现最大兼容性（我无法更改）。 .svg 是在 Canva 中创建的，使用 1920x1080 分辨率（由于 PBI 缩放背景图像的方式，它在 720/2K 用户之间提供了两全其美的效果）。现在我想让我的 .svg 动态化，这需要 URL/代码本身与我之前使用的 .svg 文件。最终用户最常见的分辨率是 720P 和 1080P，其次是 2K 分辨率。当将“画布背景”与 .svg 文件（适合）一起使用时，尽管放大/缩放会导致一些质量下降，但所有分辨率的一切看起来都很好。但是，当我使用下面的 HTML 内容视觉代码时，会出现垂直滚动条或者根本不适合。

有谁知道如何调整 .svg 代码以使用 720 Power BI 画布正确自动调整大小，同时在 720/1080/2K 分辨率下保持最佳质量？

 <div id="htmlContent">
   <div class="htmlViewerEntry">
     <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" zoomAndPan="magnify" viewBox="0 0 1440 809.999993" height="1080" preserveAspectRatio="xMidYMid meet" version="1.0">
         <defs>
           <clipPath id="ccc1313c42">
             <path d="M 9 321.75 L 1431 321.75 L 1431 801 L 9 801 Z M 9 321.75 " clip-rule="nonzero"></path>
           </clipPath>
           <clipPath id="31f810a456">
             <path d="M 15 321.75 L 1425 321.75 C 1426.589844 321.75 1428.117188 322.382812 1429.242188 323.507812 C 1430.367188 324.632812 1431 326.160156 1431 327.75 L 1431 795 C 1431 796.589844 1430.367188 798.117188 1429.242188 799.242188 C 1428.117188 800.367188 1426.589844 801 1425 801 L 15 801 C 13.410156 801 11.882812 800.367188 10.757812 799.242188 C 9.632812 798.117188 9 796.589844 9 795 L 9 327.75 C 9 326.160156 9.632812 324.632812 10.757812 323.507812 C 11.882812 322.382812 13.410156 321.75 15 321.75 Z M 15 321.75 " clip-rule="nonzero"></path>
           </clipPath>
           <clipPath id="bc7ff15eda">
             <path d="M 9 72 L 1431 72 L 1431 315 L 9 315 Z M 9 72 " clip-rule="nonzero"></path>
           </clipPath>
           <clipPath id="f0e6ad0f51">
             <path d="M 15 72 L 1425 72 C 1426.589844 72 1428.117188 72.632812 1429.242188 73.757812 C 1430.367188 74.882812 1431 76.410156 1431 78 L 1431 309 C 1431 310.589844 1430.367188 312.117188 1429.242188 313.242188 C 1428.117188 314.367188 1426.589844 315 1425 315 L 15 315 C 13.410156 315 11.882812 314.367188 10.757812 313.242188 C 9.632812 312.117188 9 310.589844 9 309 L 9 78 C 9 76.410156 9.632812 74.882812 10.757812 73.757812 C 11.882812 72.632812 13.410156 72 15 72 Z M 15 72 " clip-rule="nonzero"></path>
           </clipPath>
           <clipPath id="580c759edc">
             <path d="M 0 0 L 1440 0 L 1440 59.625 L 0 59.625 Z M 0 0 " clip-rule="nonzero"></path>
           </clipPath>
         </defs>
         <path fill="#444141" d="M 0 0 L 1439.648438 0 L 1439.648438 810 L 0 810 Z M 0 0 " fill-opacity="1" fill-rule="nonzero"></path>
         <g clip-path="url(#ccc1313c42)">
           <g clip-path="url(#31f810a456)">
             <path fill="#333333" d="M 9 321.75 L 1431.773438 321.75 L 1431.773438 801 L 9 801 Z M 9 321.75 " fill-opacity="1" fill-rule="nonzero"></path>
             <path stroke-linecap="butt" transform="matrix(0.75, 0, 0, 0.75, 9.000006, 321.750004)" fill="none" stroke-linejoin="miter" d="M 7.999993 -0.00000508426 L 1888.000087 -0.00000508426 C 1890.119879 -0.00000508426 1892.156337 0.843745 1893.656338 2.343745 C 1895.156338 3.843745 1896.000088 5.880204 1896.000088 7.999995 L 1896.000088 631.000027 C 1896.000088 633.119818 1895.156338 635.156277 1893.656338 636.656277 C 1892.156337 638.156277 1890.119879 639.000027 1888.000087 639.000027 L 7.999993 639.000027 C 5.880201 639.000027 3.843743 638.156277 2.343742 636.656277 C 0.843742 635.156277 -0.00000769259 633.119818 -0.00000769259 631.000027 L -0.00000769259 7.999995 C -0.00000769259 5.880204 0.843742 3.843745 2.343742 2.343745 C 3.843743 0.843745 5.880201 -0.00000508426 7.999993 -0.00000508426 Z M 7.999993 -0.00000508426 " stroke="#666262" stroke-width="4" stroke-opacity="1" stroke-miterlimit="4"></path>
           </g>
         </g>
         <g clip-path="url(#bc7ff15eda)">
           <g clip-path="url(#f0e6ad0f51)">
             <path fill="#333333" d="M 9 72 L 1430.929688 72 L 1430.929688 315 L 9 315 Z M 9 72 " fill-opacity="1" fill-rule="nonzero"></path>
             <path stroke-linecap="butt" transform="matrix(0.75, 0, 0, 0.75, 9.000006, 72.000016)" fill="none" stroke-linejoin="miter" d="M 7.999993 -0.000021837 L 1888.000087 -0.000021837 C 1890.119879 -0.000021837 1892.156337 0.843728 1893.656338 2.343728 C 1895.156338 3.843728 1896.000088 5.880187 1896.000088 7.999979 L 1896.000088 315.999994 C 1896.000088 318.119786 1895.156338 320.156244 1893.656338 321.656244 C 1892.156337 323.156244 1890.119879 323.999994 1888.000087 323.999994 L 7.999993 323.999994 C 5.880201 323.999994 3.843743 323.156244 2.343742 321.656244 C 0.843742 320.156244 -0.00000769259 318.119786 -0.00000769259 315.999994 L -0.00000769259 7.999979 C -0.00000769259 5.880187 0.843742 3.843728 2.343742 2.343728 C 3.843743 0.843728 5.880201 -0.000021837 7.999993 -0.000021837 Z M 7.999993 -0.000021837 " stroke="#666262" stroke-width="4" stroke-opacity="1" stroke-miterlimit="4"></path>
           </g>
         </g>
         <g clip-path="url(#580c759edc)">
           <path fill="#303030" d="M 0 0 L 1440.082031 0 L 1440.082031 59.625 L 0 59.625 Z M 0 0 " fill-opacity="1" fill-rule="nonzero"></path>
         </g>
         <path stroke-linecap="butt" transform="matrix(1.125, 0, 0, 1.125, 0.00000622222, 59.625017)" fill="none" stroke-linejoin="miter" d="M -0.00000553086 0.999985 L 1280.000059 0.999985 " stroke="#e20074" stroke-width="2" stroke-opacity="1" stroke-miterlimit="4"></path>
       </svg></div>
   </div>
 </div>

谢谢你

Answer 1

我能够解决这个问题。本机使用 HTML 内容视觉效果，由于某种原因，它会在代码底部添加填充。我通过将以下内容添加到我原来问题中的代码顶部来解决这个问题。

 <style id="visualUserStylesheet" name="visualUserStylesheet" type="text/css">
  div {
    overflow: hidden;
  }
  .os-scrollbar {
    visibility: hidden;
  }
</style>