如何使用 jQuery 或 JavaScript 将内联 SVG 设置为使用 CSS 进行拉伸

How to set inline SVG to stretch with CSS using jQuery or JavaScript

本文关键字：CSS 设置 SVG jQuery 何使用 JavaScript      更新时间：2023-09-26

我通常使用：

<style>
svg
{
    height: 100%;
    width: 100%;
}
</style>

要设置内联 svg，例如：

<svg>
    Content ...
</svg>

拉伸并覆盖屏幕。我正在使用转换来缩小图像，类似于浏览器缩放。当我将图像弄脏时，就会出现问题，因为它不再位于中心或拉伸。这是因为我使用：

var documentX = $(document).width();
var documentY = $(document).height();
offsetX = (documentX / 2) - window.x;
offsetY = (documentY / 2) - window.y;
$("svg").offset({top:offsetY,left:offsetX});

移动图像，然后根据用户在图像上单击的位置进行放大。如前所述，一旦我缩小，我需要图像恢复到最初的样子。我希望这是有道理的...

我更喜欢jQuery解决方案，但是如果没有这样的jQuery解决方案，JavaScript解决方案也可以。我试过：

$("svg").css({"height":"100%","width":"100%"});

没有成功。这是我的HTML头：

<head>
<title>Main</title>
<style>
svg
{
    height: 100%;
    width: 100%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).mousemove(function(e) {
        window.x = e.pageX;
        window.y = e.pageY;
    });
</script>
<script>
    function init()
    {
        window.zoom = 1;
        window.isZoomed = 0;
        window.zoomScale = 3;
    }
    function scale()
    {           
        if (window.isZoomed == 0)
        {
            var documentX = $(document).width();
            var documentY = $(document).height();
            offsetX = (documentX / 2) - window.x;
            offsetY = (documentY / 2) - window.y;
            $("svg").offset({top:offsetY,left:offsetX})
            document.body.style.msTransform = "scale(" + (window.zoom * window.zoomScale) + ")";
            window.zoom = window.zoom * window.zoomScale;
            window.isZoomed = 1;
        }
        else
        {
            document.body.style.msTransform = "scale(" + (window.zoom / window.zoomScale) + ")";
            window.zoom = window.zoom / window.zoomScale;
            window.isZoomed = 0;
            <!-- Need to stretch to fit window here -->
        }
    }
</script>
</head>

我基本上需要这样做

svg
{
    height: 100%;
    width: 100%;
}

但在JavaScript/jQuery???

你不需要

使用 JavaScript，只要你的 SVG 有 viewbox 属性，你就可以使用 CSS。正如您在以下示例中看到的，有一个 200 x 200 的viewbox，但它填充了一个div 它 400px/400px。

例：

.wrap {
    width: 400px;
    height: 400px;
    border: 2px solid grey;
}
.wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}
<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
    <rect x="0" y="0" width="150" height="150" rx="20" style="fill:#ff0000;" />
    <rect x="50" y="50" width="150" height="150" rx="40" style="fill:#0000ff; fill-opacity:0.7;" />
  </svg>  
</div>

如果需要，你可以像这样在jQuery中设置viewbox(根据需要替换维度(。 

$('svg')[0].setAttribute('viewBox', '0 0 200 200');

别担心，我解决了。刚决定使用

location.reload()

这对我有用...

相关文章：