SVG Element is not a real SVGElement
The code returns True in Firefox but False in Safari and Chrome although I can verify in the Chrome Properties tab, that it is indeed of type SVGElement. Weird, seems like a Chromium issue...
Read full answer below ↓Question
Behavior I use an external Javascript code that replaces some SVG elements dynamically based on their attributes. The Javascript code first checks for the type of the element to validate, that it is an SVGElement like this:
document.querySelector('#someId') instanceof SVGElement
The code returns True in Firefox but False in Safari and Chrome although I can verify in the Chrome Properties tab, that it is indeed of type SVGElement.
How I create the SVG Element I tried different things but ended up using a Plugin.
component.js
domc.addType('myType', {
isComponent: function(el) {
if(el.tagName == 'svg' && el.classList && el.classList.contains('someClass'))
return {type: 'myType'};
},
extend: 'svg',
model: {
defaults: {
type: 'svg',
tagName: 'svg',
name: 'SomeName',
traits: [...],
attributes: {
class:'someClass',
...
},
script: function () {
console.log(document.querySelector('.someClass'));
console.log(document.querySelector('.someClass') instanceof SVGElement)
...
},
}
}
});
blocks.js
bm.add('myBlock', {
label: 'someLabel',
category: 'someCategory',
name: 'blockName',
content: '<svg class="someClass"\
...\
</svg>'
});
Additional Information According to this: https://stackoverflow.com/questions/24174975/document-createelementsvg-instanceof-svgelement-is-false SVG elements are special, but from what I can see in src/dom_components/view/ComponentSvgView.js I assume, that they are created correctly.
Of course there is nothing wrong with the generated HTML-Code when using it, as browsers will then use the correct SVG - it is just not showing up when editing in GrapesJS.
Answers (1)
The code returns True in Firefox but False in Safari and Chrome although I can verify in the Chrome Properties tab, that it is indeed of type SVGElement.
Weird, seems like a Chromium issue...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #826
[Bug] Element auto generated id not added back after custom id is used and then cleared
Hi, I think there is a bug related to the generation of element id attributes. When modifying element's style the value of the element's id...
Issue #386
Extend Pannel/Command examples/documentation with opening a new view
Hi Artur, First of all grapesjs is awsome! At the moment i am trying to puzzle together how to create a pannel with a button that opens a n...
Issue #2337
[BUG / QUESTION] Deleting default styles does not work
Hello, i'm trying to delete some of the default styles of the blocks. I wrote everything I changed in a plugin. I used this function to upd...
Issue #369
Usage from source failed
I tried to use grapesjs from source by using require('grapesjs/src') to debug both my source and grapesjs. But could not success because of...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.