可以从曲线图像中删除矩形阴影吗?

时间:2015-12-12 07:56:09

标签: css css3 svg

我创建了一个svg形状。我需要删除矩形阴影。是否可以保持形状没有矩形阴影。您可以通过检查此元素来查看阴影。下面是我需要你帮助的截图。 enter image description here



* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #0097d1;
}
.inner-bg {
  width: 225px;
  height: 252px;
  position: relative;
  left: 150px;
}
.inner-bg2 {
  height: 413px;
  width: 354px;
}
.photo_rectangle_inverse {
  width: 100%;
  height: 100%;
  -webkit-clip-path: url(#shape);
  clip-path: url(#shape);
  position: relative;
  -webkit-transform: translateZ(1px)
}
.hover-bg {
  opacity: 0;
  transition: opacity .5s ease;
}
.inner-bg:hover .hover-bg,
.inner-bg2:hover .hover-bg {
  opacity: 1;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="shape">
      <path d="M1397.715,175.794c-25.751-15.171-69.059-38.065-129.139-60.976c-67.575-25.768-142.155-46.303-221.671-61.035	C947.395,35.348,839.829,26,727.195,26C262.767,26,66.548,171.319,29.886,202.439c-2.296,27.868-7.736,113.978,0.68,229.038	C36.582,513.729,48.399,594.485,65.69,671.5c21.543,95.959,51.69,186.337,89.604,268.625	c34.129,74.072,64.323,133.951,95.024,188.442c36.672,65.09,75.123,124.286,117.55,180.97	c47.205,63.067,99.354,123.173,159.428,183.753c60.364,60.873,127.474,120.997,204.717,183.385
	c76.575-61.797,143.891-122.42,205.319-184.881c60.193-61.205,112.963-122.409,161.323-187.11
	c42.74-57.182,81.631-116.64,118.893-181.771c30.475-53.269,60.348-111.148,94.01-182.15
	c39.049-82.368,69.602-173.132,90.807-269.769c17.023-77.58,28.095-159.092,32.906-242.272
	c6.667-115.242-0.692-202.073-3.775-231.25C1424.622,192.59,1413.379,185.023,1397.715,175.794z" />
    </clipPath>
  </defs>
</svg>

<svg class="inner-bg" viewBox="0 0 1464 1710">
  <g>
    <path fill="#FFFFFF" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
	C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
	c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
	c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
	c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
	c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
	c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
	C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
  </g>
  <image xlink:href='http://lorempixel.com/225/262' class='photo_rectangle_inverse' width="1464px" height="1710px" />
  <path class="hover-bg" fill="#0097d1" fill-opacity=".6" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
	C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
	c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
	c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
	c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
	c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
	c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
	C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
</svg>


<svg class="inner-bg2" viewBox="0 0 1464 1710">
  <g>
    <path fill="#FFFFFF" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
	C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
	c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
	c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
	c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
	c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
	c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
	C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
  </g>
  <image xlink:href='http://lorempixel.com/1464/1710' class='photo_rectangle_inverse' width="1464px" height="1710px" />
  <path class="hover-bg" fill="#0097d1" fill-opacity=".6" d="M1401.85,170.106c-25.92-15.308-69.51-38.408-129.982-61.524c-68.004-25.994-143.056-46.708-223.071-61.567
	C948.692,28.426,840.49,19,727.195,19c-119.749,0-231.57,9.722-332.358,28.895c-80.505,15.314-154.182,36.658-218.984,63.438
c-57.568,23.79-97.325,47.554-120.54,63.301c-16.03,10.873-26.588,19.521-32.163,24.386c-2.144,24.728-8.309,113.118,0.409,232.628
	c6.028,82.638,17.889,163.781,35.253,241.177c21.654,96.517,51.976,187.435,90.123,270.228
	c34.21,74.249,64.487,134.289,95.284,188.949c36.822,65.356,75.435,124.801,118.044,181.729
	c47.401,63.329,99.757,123.675,160.061,184.487c61.688,62.207,130.392,123.63,209.686,187.446
	c78.608-63.193,147.521-125.116,210.313-188.963c60.417-61.433,113.388-122.871,161.939-187.827
	c42.913-57.413,81.956-117.104,119.361-182.485c30.566-53.428,60.518-111.46,94.259-182.629
c39.306-82.907,70.045-174.247,91.366-271.482c17.1-77.986,28.213-159.913,33.03-243.505c6.913-119.938-1.295-209.211-4.161-235.164
	C1431.553,188.84,1419.487,180.523,1401.85,170.106z" />
</svg>
&#13;
&#13;
&#13;

请同时查看jsfiddle

0 个答案:

没有答案