Question

我在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>

我如何将这些参数从维基页面转换为该svg我不知道？

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

Answer 1

您无法将参数传递给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做到这一点。

在Mediawiki中自定义SVG

1 个答案: