我试图在嵌套在-webkit-transform的{{1}}上申请svg。 div大于svg。我想缩小它并重新定位它，使它看起来完全包含在div中。变换正在运行，但无论div之前是否从svg剪切，它都会在缩小时保持剪裁。
这个小提琴说明了我的问题。转换后，边框似乎不会在div附近？
http://jsfiddle.net/itsmikem/d3yS6/
HTML：
rect的CSS：
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" border="#0f0" fill="#ccc" width="300" height="300"/>
</svg>
</div>
答案 0 :(得分：1)
您没有为svg元素提供宽度和高度。根据SVG规范和替换元素的规则，这意味着它默认为300 x 150像素（参见Firefox），但Chrome / Webkit有一个错误，这意味着它默认为容器的高度和宽度，即100px x 100px。 Chrome计划尽快修复此问题。
由于rect是300px高/宽，你只能看到左上角。这里没有收缩，变换只是在显示svg对象的地方移动，它不会改变你可以看到的部分。将svg视为一张照片，并将转换视为旋转/移动，您在照片中看到的内容将是相同的，只是移动和旋转。
您可以给出svg元素的宽度和高度值，例如350px然后向变换添加缩放以缩小它。指定转换而不仅仅是-webkit-transform将使代码更加跨浏览器。