0

我在 MediaWiki 1.20.2 上启动并运行 ImageMagick 6.8.5-6（在 Server 2008 R2、IIS 7.5 上运行）。它正在做它的事情，并且似乎运行良好。我试图弄清楚如何将参数传递给 SVG，无论是在 wikicode 中还是使用 html 标签将 svg 包装在对象标签中。

这是我正在使用的 SVG。（在http://svg-edit.googlecode.com/上创建）这只是一个简单的箭头或标签，我将用它来指向内容和标记内容。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100" width="100%" height="100%">
  <path stroke="#000000" id="Arrow" d="m2.749992,2.750002l106.118515,0l88.431496,47.250097l-88.431496,47.249901l-106.118515,0l0,-94.499998z" stroke-width="3"/>
</svg>

我需要弄清楚如何传递宽度、高度和填充参数，以便设置标签的大小和颜色。

Wikicode 在我尝试过的情况下不起作用，所以我启用了原始 html，我这样称呼它。

<html>
  <object type="image/svg+xml" data="/wiki/images/3/32/Arrow.svg">
  </object>
</html>

我不知道如何将这些参数从 wiki 页面获取到该 svg 中？

编辑：
我环境中的桌面运行的是不支持 SVG 的 IE8。我只需要弄清楚如何告诉 ImageMagick 在生成 png 缩略图之前用给定的颜色“填充”svg。

4

1 回答 1

0

您不能将参数传递给 SVG，但您可以使用 Javascript 对其进行操作。如果您只想定位它，您可以将 svg 元素定位在正确的位置，就像它是图像一样。

<html>
 <head>
   <script>

   function pointAtMe(e) {
     var svg = document.getElementById("arrow");
     svg.style.display = "block";
     svg.style.position = "absolute";
     svg.style.top = (e.target.offsetTop - 40) + "px";
     svg.style.left = (e.target.offsetLeft - 110) + "px";
   }

   </script>
   <style>
     OBJECT { position: absolute; display: none } /* hide initially */
     BUTTON { display: block; margin: 100 auto }
   </style>
 </head>

 <body>

 <object id="arrow" width="100px" height="100px">
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 100" width="100%" height="100%">
    <path stroke="#000000" id="Arrow" d="m2.749992,2.750002l106.118515,0l88.431496,47.250097l-88.431496,47.249901l-106.118515,0l0,-94.499998z" stroke-width="3"/>
   </svg>
 </object>

<div>
  <button onclick="pointAtMe(event)">Button 1</button>
  <button onclick="pointAtMe(event)">Button 2</button>
</div>

 </body>
</html>

请注意，我们必须将其包装在 object 元素中，因为 svg 元素无法设置样式。

如果你想更聪明一些，比如动态改变 SVG 的内容，你也可以用 JS 来做。

于 2013-05-20T18:08:25.990 回答