如何使用 jQuery 或 JavaScript 设置内联 SVG 以使用 CSS 进行拉伸答案

【问题标题】：How to set inline SVG to stretch with CSS using jQuery or JavaScript如何使用 jQuery 或 JavaScript 设置内联 SVG 以使用 CSS 进行拉伸
【发布时间】：2014-12-23 12:56:50
【问题描述】：

我通常使用：

<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 jquery html css svg

【解决方案1】：

您不需要使用 JavaScript，只要您的 SVG 具有 viewbox 属性，您就可以使用 CSS。正如您在以下示例中所见，viewbox 的大小为 200 x 200，但它填充了一个 400px/400px 的 div。

示例：

.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');

【讨论】：

应该是viewBox（html解析器在解析时会自动调整大小写，但attr setter不会AFAIK）。
@ErikDahlström 我在测试中没有任何问题。我想你可能在想.prop的行为？
参见jsfiddle.net/7u5m9vv2，看起来 attr setter 在 jQuery 内部状态中设置了一些东西，但它对渲染没有影响。但是，使用标准 DOM setAttribute 确实有效。
@ErikDahlström 哦，是的，我忘记了。 jQuery 不适用于 SVG DOM 操作。
@AlexanderO'Mara 感谢您的回复。我已经知道如何让它用 CSS 填充浏览器窗口。我最初已经这样做了，但是我需要使用 javascript/jQuery 来完成，因为我缩放了图像。我已经编辑了我的问题以包含我的 HTML Head。

【解决方案2】：

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

location.reload()

这对我有用...

【讨论】：