【问题标题】:How to add image into center of svg circle?如何将图像添加到 svg 圆的中心?
【发布时间】:2013-09-03 08:06:12
【问题描述】:

我正在尝试将图像添加到 SVG 圆圈的中心。 我尝试了模式

<pattern id="image_birds" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" xlink:href="birds.png" height="50" width="50"></image>
</pattern>

但它不会使图像居中。我正在使用 Javascript。

【问题讨论】:

    标签: javascript css gwt svg


    【解决方案1】:

    剪辑应该可以满足您的需求:https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

    类似:

    <clipPath id="cut-off-bottom">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
    
    <image x="25" y="25" xlink:href="http://placehold.it/150.png" height="150" width="150" clip-path="url(#cut-off-bottom)" ></image>
    

    你可以在这里看到这个例子的结果:http://jsbin.com/EKUTUco/1/edit?html,output

    您可以通过xy 属性根据大小在javascript 中将图像居中。

    【讨论】:

    • 谢谢,但我最终还是用过滤器link
    • 好的。您应该检查两件事: 1. 是否需要 IE9 支持(过滤器仅支持 IE10,剪辑在 IE9 中工作) 2. 性能,以防您的应用程序进行密集的客户端处理。过滤器可能比剪辑慢。
    • 感谢过滤器比剪辑慢,但它为我工作。
    【解决方案2】:

    好的,我找到了答案。我所做的是在我的 svg 中添加 filter

    <filter id = "i1" x = "0%" y = "0%" width = "100%" height = "100%">
        <feImage xlink:href = "birds.png"/>
    </filter>
    

    并在圆圈中添加属性:

    circle.setAttribute('filter','url(#i1)');
    

    【讨论】:

    • 这看起来像个黑客
    猜你喜欢
    • 2012-07-14
    • 2021-04-09
    • 1970-01-01
    • 1970-01-01
    • 2015-04-14
    • 2021-09-29
    • 2020-04-09
    • 2019-06-24
    • 2019-11-06
    相关资源
    最近更新 更多