用dojo画svg_从SVG文件生成Dojo GFX图纸||

用dojo画svg

Eric Brown was my first boss at SitePen and was one of my go-to vector graphic creation men. Eric created an awesome tool for converting SVG images to JSON, useful for creating vector graphics of all rendering engines (Canvas, SVG, VML, etc.) that Dojo's GFX library supports. The original script had a few issues, so Eric's here to clear those up.

埃里克·布朗(Eric Brown)是我在SitePen的第一任老板，也是我最喜欢的矢量图形创作人员之一。 Eric创建了一个很棒的工具，可将SVG图像转换为JSON，可用于创建Dojo GFX库支持的所有渲染引擎(画布，SVG，VML等)的矢量图形。 原始脚本有几个问题，因此Eric在这里解决了这些问题。

This article builds on the earlier article Generate Dojo GFX Drawings from SVG Files. If you've not yet read that article, go and do it now. I'm not going to repeat what's already in it, and this article won't make a lick of sense without reading that one first. Really, go ahead, don't worry, go read it now. I'm a patient sort of guy and will still be here when you get back.

本文以先前的文章根据SVG文件生成Dojo GFX绘图为基础 。 如果您尚未阅读该文章，请立即执行。 我将不重复其中已经存在的内容，并且如果不先阅读该文章，这篇文章也不会太含糊。 真的，继续前进，不用担心，现在就阅读。 我是个耐心的家伙，等你回来时，我还会在这里。

So you've read it now? Good. You understand that the technique being discussed here is a way of making images that'll handle resizing gracefully without quality loss, regardless of whether they're being shown on giant desktop monitors or minuscule phone displays. With this technique you get full retina quality without the full retina download. Now you've got got the basics down and are ready to learn a handful of new tricks.

所以，您现在已经阅读？ 好。 您了解，此处讨论的技术是一种使图像能够优雅地进行尺寸调整而不会造成质量损失的方法，而不管这些图像是否显示在巨型台式机显示器或微型电话显示器上。 通过这种技术，您无需下载完整的视网膜即可获得完整的视网膜质量。 现在您已经掌握了基础知识，并准备学习一些新的技巧。

提示1 (Tip #1)

The first is a work-around for a gotcha that may have bitten you on some of the SVG images you tried to convert. Oftentimes when you do a conversion there will be errors in the resulting JSON file that will cause IE grief. Don't fret! This is a known limitation that has always been in svg2gfx.xsl, but it's trivially corrected post-conversion. All that one needs to do is remove occurrences of ,] and ,} from the JSON and the problem is solved. This can be pretty easily done with your favorite text editor, but it's also easily done with a one-liner that works on all Linux systems, Macs, and other UNIX-like machines. Starting with the file you converted per the earlier article, type the following at the command line:

首先是一个变通办法，它可能会使您在尝试转换的某些SVG图像上咬了一下。 通常，当您进行转换时，生成的JSON文件中会出现错误，这会引起IE悲伤。 别担心！ 这是一个已知限制，一直存在于svg2gfx.xsl ，但在转换后已得到了微不足道的纠正。 所有需要做的就是从JSON中删除出现的[ ,]和,} ，问题就解决了。 使用您最喜欢的文本编辑器可以很容易地做到这一点，但是使用可在所有Linux系统，Mac和其他类似UNIX的计算机上运行的单行代码也可以很容易地做到这一点。 从先前文章中转换的文件开始，在命令行中键入以下内容：

sed -e 's/,}/}/g' -e 's/,]/]/g' output.json > correctedoutput.json

This will make your JSON play nice with IE. (Yeah experts, I know this can be done more succinctly with more complicated regular expressions, but this version works with pretty much any SED.)

这将使您的JSON与IE兼容。 (是的，专家们，我知道使用更复杂的正则表达式可以更简洁地完成此操作，但是此版本几乎可以与任何SED一起使用。)

提示2 (Tip #2)

This second trick is really easy but will get you better results. Say for instance you're making a logo for your new company, "FTW", and you want a few letters incorporated into the logo. Use whatever graphics tool you're using to generate outlines for the letters prior to conversion, and your logo will display properly on every machine regardless of what fonts they've got installed. See? I told you this one was simple.

第二个技巧确实很简单，但可以为您带来更好的结果。 假设您要为新公司“ FTW”制作徽标，并且您希望在徽标中包含一些字母。 使用您使用的任何图形工具在转换之前为字母生成轮廓，并且徽标将在每台计算机上正确显示，无论它们安装了什么字体。 看到？ 我告诉你这很简单。

提示3 (Tip #3)

This third trick is nearly as simple as the second one. If you put id values on objects within your source SVG, they'll get carried through as name values within the resulting JSON. This can make debugging much easier should something go wrong. It also enables easier manual tweaking after the conversion should it be desirable. Setting id values can sometimes be done directly within your drawing application, but can also be done directly to the resulting SVG with a text editor.

第三招几乎和第二招一样简单。 如果将id值放在源SVG中的对象上，它们将作为name值传递到结果JSON中。 如果出现问题，这可以使调试变得更加容易。 如果需要，还可以在转换后更轻松地进行手动调整。 有时，可以直接在绘图应用程序中直接设置id值，也可以使用文本编辑器直接对生成的SVG进行设置。

提示4 (Tip #4)

If you're using your image in just one page, there's a performance advantage to embedding it within the JavaScript for your page. This is easily done, and best shown by example. I'll walk through the entire process of using the FTW image above into an embedded resizable logo on a page.

如果仅在一页中使用图像，则将图像嵌入到页面JavaScript中会带来性能优势。 这很容易做到，最好通过示例展示。 我将逐步介绍将上面的FTW图像用作页面上可调整大小的嵌入式徽标的整个过程。

<svg version="1.2" baseProfile="tiny" id="FTW"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="400px" height="400px" viewBox="0 0 400 400" xml:space="preserve">








  
  
  

Notice that per Tip #2 this SVG has had its FTW replaced with outlines. In lieu of three letters, it has three paths. This effectively embeds the font so it'll render the same everywhere. Also, per Tip #3 portions of the drawing have been given id attributes.

请注意，根据技巧2，此SVG的FTW已用轮廓线替换。 代替三个字母，它具有三个路径。 这有效地嵌入了字体，因此可以在所有地方呈现相同的字体。 同样，根据提示＃3，图形的某些部分已被赋予id属性。

Now we do the full conversion in just one command line by first converting it as covered in the earlier article, and then piping it directly into the postprocessing step we discussed above in Tip #1:

现在，我们通过在一个命令行中进行完全转换，首先按照前面文章中的介绍进行转换，然后将其直接传递到上文在技巧1中讨论的后处理步骤中：

xsltproc svg2gfx.xslt ftw.svg | sed -e 's/,}/}/g' -e 's/,]/]/g' > 
 if (1==1) {document.getElementById("link17").style.display="none";} ftw.json

This will give us the GFX JSON we need. It'll all be in one line. We

这将为我们提供所需的GFX JSON。 全部都在一行中。 我们

custom essay writing service 定制论文写作服务

can now copy and paste this line into a page. We'll show it copied into a page as part of the next trick.

现在可以将该行复制并粘贴到页面中。 作为下一个技巧，我们将其复制到页面中。

提示5 (Tip #5)

With just a little bit of clever hackery it's easy to work vector graphics magic into a site that features unobtrusive JavaScript. While virtually every modern environment both mobile and stationary will use the vector graphic version, folks without JavaScript will still see at least an appropriate bitmap image. The code below makes it happen; it's pretty heavily commented and thus speaks for itself. You can use it as a template for your own pages. Normally one would use a bitmap image that approximates the vector image, but here we're using two distinctly different images to make the workings of the trick more obvious.

仅需一点点巧妙的黑客技术，就可以轻松地将矢量图形魔术工作到具有不引人注目JavaScript的网站中。 尽管几乎每个现代环境中的移动和固定环境都将使用矢量图形版本，但是没有JavaScript的人们仍将至少看到适当的位图图像。 下面的代码实现了它； 它被大量评论，因此不言而喻。 您可以将其用作自己页面的模板。 通常，人们会使用近似于矢量图像的位图图像，但是在这里，我们使用了两个截然不同的图像，以使技巧的工作更加明显。

  
    
    
   
   

    
    
    
   
   
This Company Is FTW!
    
Blah blah blah, blah blah.
    
    

恭喜你！ (Congratulations!)

Now you're ready to go out and incorporate vector graphics for all your sites. You no longer have to just dream of having logos that render on any size display in crystal clear quality. You now have the power to make it happen.

现在，您可以出去为所有站点合并矢量图形了。 您不再只是梦想拥有可以在任何大小的显示器上呈现清晰质量的徽标的梦想。 您现在可以实现它。

zp8497586rq

zp8497586rq

翻译自: https://davidwalsh.name/svg-dojo

用dojo画svg