小编pra*_*yer的帖子

假设您有多个SVG标记,其中每个标记都定义了具有相同ID的不同剪辑路径.

<svg id="svg1" width="200" height="200">
    <defs>
        <clipPath id="nodeclipper">
            <rect width="100" height="100" x="0" y="0" />
        </clipPath>
    </defs>
</svg>

<svg id="svg2" width="200" height="200">
    <defs>
        <clipPath id="nodeclipper">
            <circle cx="20" cy="0" r="40" />
        </clipPath>
    </defs>
</svg>

我也做了一个JSFiddle.预期的行为是什么？我认为一个元素只能引用自己的SVG标记内的定义,但似乎并非如此:

• Chrome 26:使用circle剪辑路径两次.
• Firefox 17:使用rect剪辑路径两次.
• Safari 6:按预期渲染一个rect和一个circle剪辑路径.

当你隐藏其中一个SVG标签时会很奇怪,因为Chrome和Safari会clip-path完全掉线.

我知道它有效,当clipPaths有不同的ID,但它应该是这样吗？据我所知,该规范不包含有关该问题的信息.

我想知道在使用Javascript 保持比例的同时将绝对CSS值转换为相对值是否可行和可行.该解决方案必须与HTML和SVG标记一起使用.

说你有这个:

<div style="width:100%;height:800px">
  <svg width="1000" height="500">
    <rect width="30" height="50" x="34" y="24"/>
  </svg>
</div>

你会如何实现这一目标？

<div style="width:100%;height:100%">
  <svg width="83%" height="62.5%">
    <rect width="3%" height="10%" x="3.4% y="4.8%"/>
  </svg>
</div>

ID

1. 从根元素开始(div)
2. get .width()和.height()of this和父元素
3. 计算比例(this_height/parent_height*100)
4. 相应地设置宽度和高度
5. 迭代孩子,将孩子设置为root,从1开始.

可能发生的常见陷阱是什么？可能有标签没有宽度或高度设置,如svg:g.然后是非标准的大小定义,比如in svg:circle或者你最初没有想到的属性,比如svg:texts dy.有没有办法对由于大规模回流造成的性能损失进行有根据的猜测？还有什么？

非常感谢你!