CSS 中的 SVG，图像缩小

Question

当从 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>

这是 CSS 样式表，这次只是在它自己的文件中包含相同的信息。

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;
}

这是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">

Answer 1

看看设置“viewbox”； sizing/resizing一般可以用height/width和viewbox来控制。

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

也有可能是由于某种原因没有应用外部参考...检查 Console/Network 和 Inspector；在 console/network 中查找加载错误并检查检查器中的元素以查看正在应用的 CSS。

参考：http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

CSS 中的 SVG，图像缩小

SVG inside CSS, image shrinking

html

image

svg

resize