Question

我正试图将3个粘糊糊的圈子变成一个面具。我可以让圆圈模糊，问题是当我试图使用对比时没有任何反应。我尝试过使用CSS和内联过滤器，我无法通过对比将模糊的圆圈变成blob。对比度只是将它们变回平面圆圈。

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>

path {
  fill: none;
  stroke: none;
  stroke-width: none;
}


svg  {
  /*filter: contrast(10);*/

}

.wrapper{
  background:transparent;
  border: 1px solid #AAA;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 1000;
}
 #clip { 
  filter: contrast(10);

}

 circle {
  position: relative;
  z-index: 20000;
  fill: white;
  stroke: none;
  stroke-width: 3px;
}
.container {
   width: 100%;
   height: auto;
   position: relative;

}

img,image {

  position: relative;
  z-index: 000;
  width: 100%;
  height: auto;
  clip-path: url(#clip);
}

</style>
<div class="container">
  <div class="wrapper">

<svg viewBox="0 0 1000 1000">
  <defs>
    <filter id="filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <!-- <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" /> -->
    <!-- <feColorMatrix in="blur"
        type="matrix"
       values="2" result="goo"/>
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/> -->
    </filter>

    <mask id="mask">
      <ellipse cx="50%" cy="50%" rx="25%" ry="25%" fill="white" filter="url(#filter)"></ellipse>
    </mask>
  </defs>
    <image xlink:href="https://static1.squarespace.com/static/588d1fbacd0f68ca7ce5f394/5891180a86e6c0e1ef3953f0/5893ce19893fc09b19cf7b49/1490621130115/31_Jessica_Megan_Fringe_2015.jpg?format=750w"  mask="url(#clip)"></image>
  

</svg>
  </div>

</div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script>


var w = 0, h = 0, aspect = w / h;



var dataset1 = [];
for (var i = 0; i < 3; i++) {
  var x = Math.floor((Math.random() * 600 - 500 ) + 600);
  var y = Math.floor((Math.random() * 600 - 500 ) + 600);
  dataset1.push({
    "x": x,
    "y": y
  });
};

var dataset2 = [];
for (var i = 0; i < 4; i++) {
  var x = Math.floor((Math.random() * 600 - 500) + 600);
  var y = Math.floor((Math.random() * 600 - 500) + 600);
  dataset2.push({
    "x": x,
    "y": y
  });
};

var dataset3 = [];
for (var i = 0; i < 3; i++) {
  var x = Math.floor((Math.random() * 600 - 500) + 600);
  var y = Math.floor((Math.random() * 600 - 500) + 600);
  dataset3.push({
    "x": x,
    "y": y
  });
};

var lineFunction = d3.svg.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  })
  .interpolate("cardinal-closed")
  .tension(0);

var svg = d3.select(".wrapper")
  .append("svg")
  .attr("viewBox", "0 0 1000 1000");

var group1 = svg
  .append("defs")
  ;


var mask = group1
  .append("svg:mask")
  .attr("id", "clip");


var path1 = svg.append("path")
  .datum(dataset1)
  .attr("d", lineFunction)
  .attr("stroke", "black")
  .attr("stroke-width", 3)
  .attr("fill", "none");

var circle1 = mask.append("circle")

  .attr("r", 120)
  .attr("transform", "translate(" + [0] + ")");


var path2 = svg.append("path")
  .datum(dataset2)
  .attr("d", lineFunction)
  .attr("stroke", "black")
  .attr("stroke-width", 3)
  .attr("fill", "none");

var circle2 = mask.append("circle")
  
  .attr("r", 70)
  .attr("transform", "translate(" + [0] + ")");


var path3 = svg.append("path")
  .datum(dataset3)
  .attr("d", lineFunction)
  .attr("stroke", "black")
  .attr("stroke-width", 3)
  .attr("fill", "none")
  ;

var circle3 = mask.append("circle")

  .attr("r", 90)
  .attr("transform", "translate(" + [0] + ")");


transition();

function transition() {
  circle1.transition()
    .duration(10000)
    .attrTween("transform", translateAlong(path1.node()))
    .each("end", transition);
}


transition2();

function transition2() {
  circle2.transition()
    .duration(10000)
    .attrTween("transform", translateAlong(path2.node()))
    .each("end", transition2);

}

transition3();

function transition3() {
  circle3.transition()
    .duration(10000)
    .attrTween("transform", translateAlong(path3.node()))
    .each("end", transition3);

}


function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}


var blur =  d3
  .selectAll("circle")
  .attr("r", "200")
  .attr('filter', 'url(#filter)')
  .attr('id','circle')
  ;


</script>

＆＃13;

粘糊糊的圈子，对比不起作用。

0 个答案: