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`;尺寸/尺寸调整通常可以通过高度/宽度和视图框来控制。

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

也可能由于某种原因未应用外部参考...请检查控制台/网络和检查器;寻找在控制台/网络中加载的错误并检查Inspector中的元素以查看正在应用的CSS。

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

CSS内部的SVG，图像缩小

1 个答案: