`v-attr` with xlink namespace is not working
See original GitHub issueI tried to write a v-attr with an xlink:href
property. Unfortunately, I got a warning:
[Vue warn]: Invalid expression. Generated function body: scope.href:'/svg/ico.svg#'+scope.option.icon
I had the following code, which according to the stack overflow link must have worked at some point:
<svg class="icon icon--{{ option.icon }}">
<use v-attr="xlink:href: '/svg/ico.svg#' + option.icon">
</svg>
One problem I’ve seen in so far is that the xlink Regex in the directives/attr.js
doesn’t match. But even fixing that, I’m still getting the same error:
Line 2: var xlinkRE = /^xlink:/
should be var xlinkRE = /^xlink/
Or am I completely misunderstanding the issue?
Issue Analytics
- State:
- Created 9 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
SVG attribute namespaces · Issue #291 · d3/d3 - GitHub
I'm looking into using D3 to create <svg> s that I can convert to PDF, and I've been spending a lot of quality...
Read more >C# SelectSingleNode with NameSpace issues - Stack Overflow
XPath doesn't work with default namespaces. You must create a prefix for the namespace. This code should work: XmlNamespaceManager nsm = new ...
Read more >Namespaces crash course - SVG: Scalable Vector Graphics
The problem with mixing content from different XML dialects in a single XML document is that the elements defined by one dialect may...
Read more >Namespaces and XSLT Stylesheets - XML.com
In XML a namespace is a collection of names used for elements and attributes. ... making the result document a working XLink document....
Read more >Controlling Namespaces (XML Schema)
Schemas for XML, XML Base and XLink ... Importing Schemas with No Namespaces ... The problem of open schemas tightly controlling some namespaces...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I found in the docs that I can do this:
<use v-bind="{'xlink:href':'#a'+item.name}"></use>
https://vuejs.org/v2/api/#v-bind
You need to wrap your
xlink:href
in quotes so that Vue doesn’t treat the colon as an argument separator: