如何在< line>之类的元素上使用“内嵌" SVG渐变? [英] How may I use 'inline' SVG gradient on an element like <line>?

问题描述

是否有可能无需先在<defs>下定义它就可以实现此梯度?

Is it possible to achieve this gradient without having to define it first under <defs>?

我正在处理一个网络地图，该地图显示了设备(交换机，路由器等)之间的链接上的网络负载.我使用SVG绘制了此图像，但是我不想定义所有渐变，因为已经从后端系统为我提供了开始(上行)和结束(下行)颜色，并且可以通过应用程序中的模板变量进行访问.

I'm working on a network map showing network load on links between devices (switches, routers ..). I draw this using SVG, but I don't want to define all gradients as the start (uplink) and end (downlink) color is already given to me from the back end system and accessible through template variables in our application.

我希望使用内联样式，因为明智的编写代码要容易得多，因为我不必跟踪成千上万的链接引用，并确保为每个链接指定正确的渐变，因为每个渐变都会'我在网络图中绘制的每一行(链接负载)的时间都是99.9％"

I wish to use inline-styles as it is much easier to do code wise as I don't have to keep track of thousands of link references and make sure I specify the right gradient for every link, as every gradient will '99.9%' of the time be unique for every line (link-load) I draw in my network map

简单地说，我可以做点什么:<line stroke=<linearGradient...吗?无需定义一个并返回引用?像CSS中的样式: <span style='color: blue'> .. </span>

Put in simple words, can I do something along the line: <line stroke=<linearGradient... ? without having to define one and reference back to it? Like style in CSS: <span style='color: blue'> .. </span>

<svg width="1024" height="800">
 <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#000066;stop-opacity:1" />
      <stop offset="51%" style="stop-color:#00ffff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#00ffff;stop-opacity:1" />
    </linearGradient>
  </defs>
<text x="50" y="50" fill="red">foo bar</text>a
<line stroke="url(#grad1)" x1="130.8757632890282"
      y1="163.6818288670081" x2="651.9483366457684" y2="415.704113030817" />
</svg>

( http://jsfiddle.net/GgJnB/)

推荐答案

您可以使用数据URI，即fill ="url(data:image/svg + xml; base64，... encoded full svg ...#mygradient )"

You could use a data URI i.e. fill="url(data:image/svg+xml;base64,...encoded full svg...#mygradient)"

这里是一个示例: http://xn--dahlstrm- t4a.net/svg/paint/datauri-gradient.svg

这篇关于如何在< line>之类的元素上使用“内嵌" SVG渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！