Html CSS中的SVG，图像收缩_Html_Image_Svg_Resize

Html CSS中的SVG，图像收缩

html image svg

Html CSS中的SVG，图像收缩,html,image,svg,resize,Html,Image,Svg,Resize,当从html内部移动到css文件上时，会导致图像（在本例中为svg）大小调整的原因是什么。我有一个位于背景上方的图像，当鼠标悬停在它的一部分时，使用svg掩码显示底层背景图像。这个很好用！但是，当我将css和javascript移动到它自己的文件中，而不是全部移动到同一个html文件中时，顶部图像（svg内部）会缩小到一个小尺寸。任何关于为什么会发生这种情况的帮助都将不胜感激，谢谢这是原作，效果很好 <!DOCTYPE html> <html> <head>

当从html内部移动到css文件上时，会导致图像（在本例中为svg）大小调整的原因是什么。我有一个位于背景上方的图像，当鼠标悬停在它的一部分时，使用svg掩码显示底层背景图像。这个很好用！但是，当我将css和javascript移动到它自己的文件中，而不是全部移动到同一个html文件中时，顶部图像（svg内部）会缩小到一个小尺寸。任何关于为什么会发生这种情况的帮助都将不胜感激，谢谢

这是原作，效果很好

<!DOCTYPE html>
<html>
<head>
    <script type="application/javascript" src="mouseOverJS.js"></script>
    <style>
       svg {
            width: 856px;
            height: 856px;
        }
        body {
            background-color: white;
            background-image: url("lolMap.png");
            background-repeat: no-repeat;
            margin: 0; padding:0;
        }
        image:hover {
            mask: url("#cursorMask");

        }
        p{
            margin: 0; padding:0;
        } 

    </style>
</head>
<body>
    <p>
    <svg>
        <mask id="cursorMask" maskUnits="objectBoundingBox" maskContentUtils="objectBoundingBox">
        <defs>
            <filter id="f1" x="0" y="0">
              <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="50%" style="stop-color:rgb(0,0,0); stop-opacity:2" />
              <stop offset="75%" style="stop-color:rgb(0,0,0); stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
            </radialGradient>
        </defs>
        <g>
            <!-- the SECOND rect element is what determines the transparent area -->
            <rect x="0" y="0" width="856" height="856" fill="#FFFFFF" />
            <circle cx="0" cy="0" r="100" fill="url(#grad1)" />
        </g>
    </mask>
</defs>
   <image width="856" height="856" xlink:href="lolMapDark.png" />
    </svg>
    </p>
</body>

这是js文件

window.addEventListener("load", function() {
            var img = document.getElementsByTagName("image")[0];
            var imgPos = img.getBoundingClientRect();
            var imgX = imgPos.left;
            var imgY = imgPos.top;
            var circle = document.getElementsByTagName("circle")[0];
            var circleRadius = circle.getAttribute("r") / 2;
            img.addEventListener("mousemove", function (e) {
                 circle.setAttribute("cx", e.clientX - imgX);
                    circle.setAttribute("cy", e.clientY - imgY);
                }, false);
        }, false);

我还将样式标记替换为

 <link rel="stylesheet" type="text/css" href="mouseOverCSS.css">

查看“查看框”的设置；大小调整通常可以通过高度/宽度和viewbox进行控制

<svg width="856" height="856" viewbox="0 0 856 856">

也有可能是由于某种原因，外部引用未被应用。。。检查控制台/网络和检查员；在控制台/网络中查找加载错误，并检查Inspector中的元素以查看应用了什么CSS

参考资料：

谢谢您的推荐。svg视图框似乎工作正常。我在控制台/网络中没有收到任何错误，因此我有点困惑。你知道为什么当css被移动到一个外部文件时需要应用，而在同一个文件中不需要应用吗？希望我能告诉你。。。一点线索也没有。我将复制两次迭代中的所有代码，并在某个时候使用它。如果我有什么想法，我会在这里发布更新。

<svg width="856" height="856" viewbox="0 0 856 856">