在 Mediawiki 中自定义 SVG答案

【问题标题】：Customizing an SVG in Mediawiki在 Mediawiki 中自定义 SVG
【发布时间】：2013-05-18 23:36:32
【问题描述】：

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

【问题讨论】：

您是否尝试将 SVG 添加为内联 HTML？
是的，我应该提到我正试图让它在 IE8 中工作。可悲的是，企业桌面决定了桌面上的 IE 版本。 ImageMagick 正在做它的事情，我只需要弄清楚如何告诉 ImageMagick 在生成给定大小的 png 缩略图之前如何更改 Fill 属性。
想法：Raphael.js 与 IE6-8（使用 VML）一起工作，如果您使用 Raphael（浏览器大小）动态生成，那么您跳过 imagemagick 部分并专注于“填充”问题。
“wikicode 不起作用”是什么意思？ Image markup 绝对允许更改宽度（和高度），请确保您正确配置了缩略图。

标签： html svg mediawiki

【解决方案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>

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

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

【讨论】：

抱歉没有尽快回复。在玩过这种方法之后，它适合我的需要。谢谢！