Question

我的代码在IE和Firefox中工作。但它不适用于chrome

svg代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
 <clipPath id="clipPath">
          <polygon points="0,0 0,500 394,500 394,117 407.697,99.803 394,83 394,0    "/>
      </clipPath>
</svg>

css代码：

.page article{
  width:48%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index:2;
  padding:2% 5% 2% 2%;
  clip-path:url(img/descripation_backgro_page1.svg#clipPath);
}

Answer 1

使用外部SVG时，Chrome有一个限制：

“部分支持是指支持内联SVG的形状和url（#foo）语法，但不支持外部SVG中的形状。”

来源：http://caniuse.com/css-clip-path

clip-path属性在chrome中不起作用

1 个答案: