Question

我已经收到了一些我已经放在一起的SVG，但我要解决的一件事就是移动我已创建的面具。用一个例子来描述最简单：

＆＃13;

function createFog(imageUrl) {
  const mapImage = new Image();

  mapImage.onload = function() {
    // Grab the dimensions of the map
    const width = this.width;
    const height = this.height;

    d3.selectAll(".full-size").attr({
      height,
      width
    });
    d3.select("#map").attr("xlink:href", imageUrl);
  };

  mapImage.src = imageUrl;
}
createFog("https://oneinchsquare.files.wordpress.com/2015/01/greenest_transparent_grid.jpg");

＆＃13;

img, svg, canvas {
    position: absolute;
    top: 0;
    left: 0;
}

html, body {
    overflow: hidden;
    background: black;
}

#interaction {
    fill: none;
    pointer-events: all;
}

#light {
    opacity: 0.9;
}

#fog {
    opacity: 0;
    fill: black;
}

.explore-outline {
    fill: none;
    stroke: #aaa;
}

.torch-outline {
    fill: none;
    stroke: #ff9800;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<svg class="full-size">
        <g id="view" transform="scale(0.25)">
            <defs>
              <radialGradient id="radGrad" class="full-size" r="0.31">
                <stop offset="0%" stop-color="black" />
                <stop offset="50%" stop-color="#aaa" />
                <stop offset="60%" stop-color="#bbb" />
                <stop offset="70%" stop-color="#ccc" />
                <stop offset="80%" stop-color="#ddd" />
                <stop offset="90%" stop-color="#eee" />
                <stop offset="100%" stop-color="white" />
              </radialGradient>
              <mask class="full-size" id="explored">
                    <rect class="full-size" id="unexplored" x="0" y="0" width="500" height="500" fill="white"/>
                    <g id="explored"></g>
              </mask>
              <mask id="hole">
                <rect id="mask" class="full-size" x="0" y="0" width="500" height="500" fill="url(#radGrad)"></rect>
              </mask>
            </defs>
            <image class="full-size" id="map" x="0" y="0"/>
            <rect class="full-size" id="light" x="0" y="0" width="500" height="500" mask="url(#hole)"></rect>
            <rect class="full-size" id="fog" x="0" y="0" width="500" height="500" mask="url(#explored)"></rect>
        </g>
        <rect id="interaction" class="full-size" x="0" y="0"></rect>
      </svg>

＆＃13;

我希望能够做的是移动＆＃34;灯＆＃34;当有人点击背景时，将灯光移动到该点。这种光效实际上是通过在暗层中间切割一个洞来创建的。从这个角度来看，我不需要帮助代码，我在SVG中尝试做的事情似乎不会产生我想要的效果。

我遇到的问题是我似乎无法移动radialGradient，我认为我可以设置cx或cy但他们似乎没有做任何事情。

这给我留下了另一个我尝试过的选项 - 翻译#mask或#light元素，但是这样做会让地图的一部分无法覆盖。我以为我能够超大这些层来补偿 - 但不幸的是，这个洞可以扩大到我想要做的更大的范围。

无论如何我可以移动这个＆＃34;洞＆＃34;有效？

Answer 1

我以为我可以设置cx或cy，但他们似乎什么都不做。

当cx和cy发生变化时似乎工作正常。

＆＃13;

function createFog(imageUrl) {
  const mapImage = new Image();

  mapImage.onload = function() {
    // Grab the dimensions of the map
    const width = this.width;
    const height = this.height;

    d3.selectAll(".full-size").attr({
      height,
      width
    });
    d3.select("#map").attr("xlink:href", imageUrl);
  };

  mapImage.src = imageUrl;
}
createFog("https://oneinchsquare.files.wordpress.com/2015/01/greenest_transparent_grid.jpg");

＆＃13;

img, svg, canvas {
    position: absolute;
    top: 0;
    left: 0;
}

html, body {
    overflow: hidden;
    background: black;
}

#interaction {
    fill: none;
    pointer-events: all;
}

#light {
    opacity: 0.9;
}

#fog {
    opacity: 0;
    fill: black;
}

.explore-outline {
    fill: none;
    stroke: #aaa;
}

.torch-outline {
    fill: none;
    stroke: #ff9800;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<svg class="full-size">
        <g id="view" transform="scale(0.25)">
            <defs>
              <radialGradient id="radGrad" class="full-size" r="0.31"
                              cx="0.3" cy="0.7">
                <stop offset="0%" stop-color="black" />
                <stop offset="50%" stop-color="#aaa" />
                <stop offset="60%" stop-color="#bbb" />
                <stop offset="70%" stop-color="#ccc" />
                <stop offset="80%" stop-color="#ddd" />
                <stop offset="90%" stop-color="#eee" />
                <stop offset="100%" stop-color="white" />
              </radialGradient>
              <mask class="full-size" id="explored">
                    <rect class="full-size" id="unexplored" x="0" y="0" width="500" height="500" fill="white"/>
                    <g id="explored"></g>
              </mask>
              <mask id="hole">
                <rect id="mask" class="full-size" x="0" y="0" width="500" height="500" fill="url(#radGrad)"></rect>
              </mask>
            </defs>
            <image class="full-size" id="map" x="0" y="0"/>
            <rect class="full-size" id="light" x="0" y="0" width="500" height="500" mask="url(#hole)"></rect>
            <rect class="full-size" id="fog" x="0" y="0" width="500" height="500" mask="url(#explored)"></rect>
        </g>
        <rect id="interaction" class="full-size" x="0" y="0"></rect>
      </svg>

＆＃13;

移动SVG掩码

1 个答案: