Question

我遇到了FF的问题，并试图创建一个响应式SVG，它在Chrome / Safari上正常工作，但它似乎忽略了FF中的比例属性（几乎在37.0.2 / Mac我有）。这是问题的小提琴。

http://jsfiddle.net/adrianperez/zmhnsjx8/

我试图包含clipPathUnits =＆＃34; objectBoundingBox＆＃34;但直接它从视图中消失了......我也尝试了不同的方法（比如尝试简单的路径，例如它似乎适用于这个）

<path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>

我已经检查了svg版本，似乎是正确的），我做错了什么？

Answer 1

我认为你真正想要的是剪辑图像而不是<svg>元素。

<svg>元素有一个viewBox，它只将变换应用于其子节点而不应用于其CSS属性，因此将剪辑路径附加到<svg>元素将不会执行剪辑你认为它会成为一种从属系统。

svg {
    background: red;
    min-height: 200px;
}

image {
    /*-webkit-clip-path: url(#myClip);*/
	clip-path: url(#myClip);
}

.container{
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="container">
 <svg version="1.1" id="brush" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 454 322" enable-background="new 0 0 454 322" preserveAspectRatio="xMidYMid slice">
         
    <image xlink:href="http://images.medicaldaily.com/sites/medicaldaily.com/files/2013/08/04/0/62/6259.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>

        <defs>
          <clipPath id="myClip">
              <path d="M212.128,119.01c-0.14-0.31-0.164-0.489-0.156-0.67c0.082-1.791,0.167-3.583,0.253-5.374c0.004-0.071,0-0.16,0.039-0.212
	c0.454-0.582,0.34-1.271,0.403-1.935c0,0,0.135-1.426,0.231-2.049c0.099-0.622,0.229-2.685,0.294-3.684
	c0.066-0.999,0.604-2.021,0.604-2.021c0.031-0.373,0.112-0.743,0.177-1.113c0.05-0.282,0.105-0.564,0.16-0.847
	c0.088-0.457,0.188-0.911,0.264-1.37c0.039-0.232-0.021-0.496,0.063-0.704c0.476-1.163,0.454-2.448,0.971-3.616
	c0.287-0.646,0.326-1.394,0.646-2.081c0.186-0.403,0.264-0.913,0.505-1.338c0.23-0.406,0.426-0.837,0.7-1.212
	c0.277-0.381,0.381-1.012,0.115-1.374c-0.401-0.548-0.822-1.082-1.225-1.629c-0.391-0.533-0.742-0.506-1.277-0.189
	c-0.499,0.293-0.584,0.817-0.894,1.204c-0.46,0.575-0.731,1.309-1.035,1.995c-0.161,0.363-0.21,0.774-0.329,1.157
	c-0.071,0.226-0.182,0.44-0.273,0.659c-0.045-0.014-0.089-0.029-0.134-0.043c-0.017,0.163,0.023,0.365-0.059,0.481
	c-0.634,0.904-0.625,2.028-0.959,3.026c-0.356,1.062-0.855,2.171-0.786,3.366c0.005,0.083-0.037,0.174-0.073,0.255
	c-0.352,0.792-0.587,1.608-0.57,2.487c0.004,0.251,0.043,0.58-0.092,0.741c-0.408,0.497-0.307,1.061-0.332,1.611
	c-0.005,0.379-0.29,1.388-0.29,1.388s-0.229,2.029-0.295,2.718c-0.064,0.688-0.811,3.038-0.811,3.038
	c-0.248,0.906-0.449,1.82-0.36,2.771c0.015,0.162,0.029,0.35-0.038,0.487c-0.56,1.144-0.443,2.403-0.641,3.608
	c-0.072,0.442-0.124,0.89-0.156,1.335c-0.039,0.526-0.053,1.056-0.065,1.583c-0.009,0.315,0.046,0.636,0.003,0.945
	c-0.049,0.352-0.173,0.689-0.279,1.089v0.13c-0.066,0.362-0.042,0.327,0.017,1.146c0.059,0.817,0,1.875,0,1.875
	c0.106,0.923,0.241,1.738,0.285,2.557c0.097,1.794,0.161,3.589,0.209,5.385c0.029,1.069,0.002,2.141,0,3.209
	c-0.001,0.091,0.016,0.217-0.035,0.266c-0.563,0.55-0.287,0.996,0.063,1.544c0.221,0.343,0.112,0.878,0.26,1.289
	c0.343,0.958,0.443,1.937,0.374,2.936c-0.029,0.422-0.134,0.838-0.213,1.308c0.035,0.039,0.178,0.129,0.2,0.241
	c0.165,0.843,0.295,1.691,0.46,2.533c0.08,0.411,0.133,0.861,0.343,1.205c0.248,0.401,0.648,0.71,0.994,1.048
	c0.051,0.051,0.215,0.079,0.243,0.045c0.398-0.466,0.91-0.535,1.498-0.614c0.814-0.111,1.332-0.835,1.979-1.296
	c0.697-0.496,0.664-1.076,0.629-1.73c-0.067-1.262,0.094-2.49,0.412-3.438c-0.191-0.653-0.348-1.104-0.454-1.566
	c-0.068-0.3,0.047-0.782-0.115-0.893c-0.441-0.3-0.593-0.737-0.647-1.16c-0.149-1.146-0.207-2.304-0.291-3.457
	c-0.04-0.536,0.077-1.103-0.354-1.549c-0.032-0.033-0.052-0.103-0.044-0.149c0.086-0.628,0.091-1.233,0.027-1.886
	c-0.185-1.914,0.034-3.852-0.26-5.78c-0.177-1.161,0.097-2.4-0.146-3.536c0,0-0.136-0.904,0.106-2.146
	C212.213,119.768,212.128,119.01,212.128,119.01z"/>
          </clipPath>
        </defs>
    </svg>
</div>

Firefox dos中的SVG + clipPath + preserveAspectRatio响应缩放

1 个答案: