6

The documentation for Snap.svg's Snap() function lists three possible ways of creating a Snap object.

  • Snap(width, height) - Creates a new, blank canvas of given dimensions.
  • Snap(svg element) - Create a Snap canvas from an existing, inline SVG element
  • Snap(css selector) - Same as above, but with a selector rather than a direct reference

Is it possible to create a Snap object from either an SVG embedded as either an<object> element or a <img>?


Average of M2M element in ListView

This is my model:

class FruitItem(models.Model):
    vote = models.IntegerField()

class Fruit(models.Model):
   name = models.CharField(max_length=77)
   items = models.ManyToManyField(FruitItem)

This is my views:

class LoginRequiredMixin(object):
    @method_decorator(login_required)
    def dispatch(self, request, *args, **kwargs):
        return super(LoginRequiredMixin, self).dispatch(request, *args, **kwargs)

class FruitsList(LoginRequiredMixin, ListView):
    template_name = 'fruits.html'
    context_object_name = "fruits"
    paginate_by = "8"

    def get_queryset(self):
        return Fruit.objects.filter(user=self.request.user).annotate(
                            vote_avg=Avg('items__vote'))

and template:

{% for f in fruits %}
    {{ f.name }}
    {{ f.items.vote_AVERAGE }}
{% endfor %}

How can I display vote average for every list element?({{ f.items.vote}})

4

4 回答 4

2

通过查看源代码,我认为只做 aSnap('#object-id')会给你 SVG,而不是做.node.contentDocument. 这可能是最近的改进,但截至今天,这已正式存在于代码中。

这是支持的源代码:https ://github.com/adobe-webplatform/Snap.svg/blob/5b17fca57cbc4f8a8fd9ddd55cea2511da619ecf/dist/snap.svg.js#L3182-L3184

于 2014-08-19T04:33:09.447 回答
1

如果您从同一个域提供 svg,最好的方法可能是使用Element.node带有标签的 Snap。<object>例如,您不能从文件系统使用它,您必须设置本地服务器(同源策略)。

如果你有

<object id="graph" data="somevectors.svg" type="image/svg+xml"></object>

然后你可以使用这个

var s = Snap(Snap("#graph").node); //wrap the element

然后使用 CSS 选择器选择 svg 元素并搞乱它们

var circle = s.select("#circle")
   .attr({
      opacity: .3
   });
于 2015-02-18T19:15:37.307 回答
1

我能想出的唯一可行的方法是使用对象标签之类的内容,带有 contentDocument (可能需要检查支持,但 Snap 并不是真的针对旧浏览器)。

我认为 svg 图像必须是文件的本地文件,所以远程调用图像我认为不起作用(或者可能使用一些修改后的服务器设置),所以我无法让它在小提琴上显示,只是下面有一个测试网址,所以代码将类似于......

在 HTML...

<object id="tux" data="Dreaming_Tux.svg" width="600" height="600" type="image/svg+xml"></object>

然后.js....

var tux = Snap("#tux");
var tuxContent = tux.node.contentDocument;   /// grab the referenced content

var sTux = Snap( tuxContent.firstChild );    /// snapify it
var tuxPaths = sTux.selectAll('path');       /// use snaps selector to grab elements

tuxPaths.forEach( function( el ) { el.attr({ opacity: 0.2 }) });

测试示例在这里

于 2014-02-28T16:54:22.000 回答
0

@kumar_harsh 是对的。话虽如此,由于页面加载问题,我无法让它工作。即使在 window.onload 回调中,Snap('#object-id')返回 null 或返回对象标记,其中没有任何内容。

要使用简单Snap('#object-id'),我必须使用此处文档中演示的方法:

1) 用空的 svg 标签 ( #object-id-> #svg-id)替换对象标签

2) 变量s = Snap(#svg-id)

3)使用加载svg元素Snap.load('/path/to/my/svg.svg')

4)在加载回调函数中s.append(resultData)

5) 使用快照

如果您的代码在您的浏览器控制台中运行,但不是实时的,那么您可能会遇到同样的问题,您的解决方案就在上面。

于 2018-11-01T17:37:20.630 回答