相关疑难解决方法(0)

我正在尝试在svg图像周围添加边框.我尝试了两种方法,但都失败了......

尝试1:绘制图像但没有边框..

<image id="note-0" xlink:href="http://example.com/example.png" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>

尝试2:绘制图像但没有边框..

<defs>
    <image id="image1352022098990svg" height="202" width="150" xlink:href="http://example.com/example.png"></image>
</defs>

<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/>

所以我的问题是,是否有可能在svg元素上定义一个图像并同时在它周围有一个边框/笔划？

此外,似乎我可以使用translate和x/y属性来定位svg元素.哪个是优先的,为什么？

我试图用d3.js为s svg:image(嵌入在SVG中的图像)制作圆角.我无法找到如何正确设置图像样式,因为根据W3C规范,我应该可以使用CSS,但更好的边框和圆角边缘对我有效.

提前致谢.

  vis.append("svg:image")
     .attr("width", width/3)
     .attr("height", height-10)
     .attr("y", 5)
     .attr("x", 5)      
     .attr("style", "border:1px solid black;border-radius: 15px;")
     .attr("xlink:href",
           "http://www.acuteaday.com/blog/wp-content/uploads/2011/03/koala-australia-big.jpg"); 

编辑:

浏览器测试:Firefox,Chrome

我正在为一个Web应用程序工作.我完成了html5/css3部分,唯一剩下的就是几个svg元素.问题是我对应用程序有不同的主题,所以我不确定如何设置这些svg元素的样式,以便它们随主题变化.我想有一种方法是为每个主题制作不同的.svg文件,但有没有办法给svg元素(它可以包含在html文件中,它不必是外部文件)边框,渐变,阴影等只使用css？