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

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

javascript jquery html css svg

如何使用jQuery或JavaScript将内联SVG设置为使用CSS进行拉伸,javascript,jquery,html,css,svg,Javascript,Jquery,Html,Css,Svg,我通常使用： <style> svg { height: 100%; width: 100%; } </style> 移动图像，然后根据用户单击图像的位置放大。如前所述，一旦缩小，我需要图像恢复到最初的状态。我希望这是有道理的我更喜欢jQuery解决方案，但是如果没有这样的jQuery解决方案，JavaScript解决方案也可以。我试过： $("svg").css({"height":"100%","width":"100%"}); 没有成功。这是我

我通常使用：

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

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

我更喜欢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>

但是在JavaScript/jQuery中？？？

您不需要使用JavaScript，只要SVG有一个属性，就可以使用CSS。正如您在下面的示例中所看到的，有一个200乘200的

viewbox

，但它填充的div为400px/400px

示例：

.wrap{
宽度：400px；
高度：400px；
边框：2倍纯色灰色；
}
.wrap svg{
宽度：100%；
身高：100%；
显示：块；
}


别担心，我已经解决了。刚决定用
location.reload()

这对我来说很有用…
应该是viewBox
（html解析器在解析时自动调整大小写，但attr setter不起作用）。@ErikDahlström我在测试中没有遇到任何问题。我认为您可能正在考虑.prop
的行为。请看，attr setter似乎在jQuery内部状态下设置了一些内容，但它对渲染没有影响。不过，使用标准DOMsetAttribute确实有效。@ErikDahlström哦，是的，我忘了。jQuery在SVG DOM操作中效果不佳。@AlexanderO'Mara感谢您的回复。我已经知道如何用CSS填充浏览器窗口。最初我已经这样做了，但是我需要使用javascript/jQuery，因为我可以缩放图像。我已经编辑了我的问题，包括我的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%;
}

location.reload()