Linking into SVG content: Is it possible to specify an id AND a viewBox in a single URL fragment? - svg

I want to confirm my interpretation of the SVG spec:
You can refer to an ID of an SVG. e.g., MyDrawing.svg#MyView
You can refer to an SVG viewBox. e.g., MyDrawing.svg#svgView(viewBox(0,200,1000,1000))
(This is what I want to confirm) But you can't do both in the same url. These options are mutually exclusive.
Context: I have a desire to link to an id attribute nested inside an svg but I also want to dynamically specify the view box. Ideally, I wouldn't have to modify the SVG to do this, because I have to do it for a lot of files; when/if my designer makes a modification, I don't want to have to do all that work over again.

Related

fabricJS - SVG parameters with toSVG

According to this link, it is possible to modify a SVG, depending on the parameters included in the URL used to access this SVG.
Is it possible to do so using the toSVG() method ?
Let's say I create a basic canvas with a few elements. Once I'm done, I export and save the result of my canvas.toSVG() on AWS.
I get this image
Is it possible to modify the way toSVG() behaves, so that adding ?color=red at the end of the URL would make my tshirt red ?
I tried using the example from the documentation, using replace() on my canvas objects, but this generates empty SVGs.

TinyMCE and SVG

I'm using the latest/current TinyMCE editor (<script type="text/javascript" src='https://cdn.tinymce.com/4/tinymce.min.js'></script>) and it doesn't seem capable of displaying <svg>. I have some HTML saved in a database which contains some <svg>. When loaded in TinyMCE, it doesn't display.
Is this a known issue (I've searched and haven't found much)? Any workarounds?

TinyMCE strips empty and invalid tags. You can solve it by
Adding '&nbsp' to each empty element:
svg.find('*').each(function() {
if (!$(this).html()) {
$(this).text(' ');
}
});
here svg is your jQuery wrapped svg element.
Extending the valid elements according to the svg element reference*
extended_valid_elements: "svg[*],defs[*],pattern[*],desc[*],metadata[*],g[*],mask[*],path[*],line[*],marker[*],rect[*],circle[*],ellipse[*],polygon[*],polyline[*],linearGradient[*],radialGradient[*],stop[*],image[*],view[*],text[*],textPath[*],title[*],tspan[*],glyph[*],symbol[*],switch[*],use[*]"
*Note I added only the elements relevant for my case.

I tried Koen's first suggestion and it worked for existing SVG content (I added this in the setup callback). However it still filtered the SVG tags out when pasting HTML into the source code editor and then confirming the dialog.
After digging a bit into TinyMCE's source code to see where those elements are actually removed (it's in the DomParser class) I found an undocumented editor setting for the Schema class that specifies tags that are allowed to be empty without being removed. The only annoying thing is that you can't use it to add to the existing list, you can only override it. So when setting it you have to list the tags it has in there by default as well. Use this in the settings that you provide to TinyMCE when initialising it:
// First the list of tags that it normally knows about by default:
non_empty_elements: "td,th,iframe,video,audio,object,script,pre,code,area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed,source,wbr,track"
// Now we add tags related to SVGs that it doesn't normally know about:
+ "svg,defs,pattern,desc,metadata,g,mask,path,line,marker,rect,circle,ellipse,polygon,polyline,linearGradient,radialGradient,stop,image,view,text,textPath,title,tspan,glyph,symbol,switch,use",
This way these SVG tags should never be filtered out because they are empty - as long as they are also valid in general, e.g. by setting the extended_valid_elements as Koen suggested above or by allowing all elements (not recommended as it leaves you vulnerable to XSS attacks):
extended_valid_elements: "*[*]"
Please note that this worked for my version 4.5.8 of TinyMCE. Since this setting is undocumented it might not work anymore in current or future versions. Also they might've adjusted the default list that I'm overriding here in later versions. Find nonEmptyElementsMap and shortEndedElementsMap in Schema.js in their source code to find the default list in your version (the two lists get combined) and note that in there the tags are separated by spaces but when you supply a list yourself the list is separated by commas (for whatever reason).

Seams to be TinyMCE that removes it because it is an empty tag: http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2015/1/tinymce-and-svgs/
You might be able to use this inside the init:
extended_valid_elements : "svg[*]",
It works with other empty tags etc, but have never tried with SVG.
From the forum post I linked to:
ok,I did some debugging into TinyMCE and the problem seems to be that
the svg element is detected as being empty and therefor removed.
Unfortunatley there is no config way to change this behavior but there
are some workarounds.
Always have a name attibute for the svg element: <svg name="something"
Always have a data-mce attribute for the svg element: <svg data-mce-something="something"
Include some text content within the svg element: <svg> </svg> Using these techniques i could succesfully store
inline svg in an xhtml property

I made it work by adding all valid SVG elements to the extended_valid_elements property of the settings object while initializing TinyMCE, no other action was needed
For your convenience here's the full list of SVG elements I used
a[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],color-profile[*],cursor[*],defs[*],desc[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignObject[*],g[*],glyph[*],glyphRef[*],hkern[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*],a[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],defs[*],desc[*],discard[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],foreignObject[*],g[*],hatch[*],hatchpath[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tspan[*],use[*],view[*],g[*],animate[*],animateColor[*],animateMotion[*],animateTransform[*],discard[*],mpath[*],set[*],circle[*],ellipse[*],line[*],polygon[*],polyline[*],rect[*],a[*],defs[*],g[*],marker[*],mask[*],missing-glyph[*],pattern[*],svg[*],switch[*],symbol[*],desc[*],metadata[*],title[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],feSpecularLighting[*],feTile[*],feTurbulence[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],hkern[*],vkern[*],linearGradient[*],radialGradient[*],stop[*],circle[*],ellipse[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],text[*],use[*],use[*],feDistantLight[*],fePointLight[*],feSpotLight[*],clipPath[*],defs[*],hatch[*],linearGradient[*],marker[*],mask[*],metadata[*],pattern[*],radialGradient[*],script[*],style[*],symbol[*],title[*],hatch[*],linearGradient[*],pattern[*],radialGradient[*],solidcolor[*],a[*],circle[*],ellipse[*],foreignObject[*],g[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],svg[*],switch[*],symbol[*],text[*],textPath[*],tspan[*],use[*],g[*],circle[*],ellipse[*],line[*],path[*],polygon[*],polyline[*],rect[*],defs[*],g[*],svg[*],symbol[*],use[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],glyph[*],glyphRef[*],textPath[*],text[*],tref[*],tspan[*],altGlyph[*],textPath[*],tref[*],tspan[*],clipPath[*],cursor[*],filter[*],foreignObject[*],hatchpath[*],script[*],style[*],view[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animateColor[*],cursor[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],glyph[*],glyphRef[*],hkern[*],missing-glyph[*],tref[*],vkern[*]

Add svg attributes in diagrams

I would like to add tooltips (or hovering behavior) on SVG diagrams generated by diagrams.
Is there a way to add custom properties to a diagram , or worst comes to the worst be able to set and id to things, so they can be referred to in Javascript.

The question is slightly misleading because the title property that gives tooltips on SVGs in browsers is not an attribute, but an element of its own. You add tooltips, that is SVG titles, with the method svgTitle in Diagrams.Backend.SVG.
The same module also contains methods svgID and svgClass to add these attributes to allow external javascript to find specific SVG elements.

I kept googling, and havn't tried it yet, but I found this. It seems to exist to exactly satisfy your need.
It is SVG backend only.

Orchard CMS: Add a stylesheet to a page

Setup:
I am using Orchard CMS 1.6.
I have a site where I need to be able to set the background color of the whole page. Ie, I need to style the body tag.
I could use the LayoutSelector module and have distinct layouts. However, the only difference in each layout is that the background-color rule for the body tag is different. So it seems a very un-dry way of doing things.
I can't find any way to make Vandelay.Classy add a distinct id or class to the body tag (it adds, as I understand it) an id or a class to the outer tag of a content type. In my case, that isn't the body tag.
So that is no good, I really do need to customize the body tag.
How to do this?
Note:
I need 3 different background colors. I also have a two column layout and a three column layout. [I use (a modified version of) the layoutSelector module to achieve this.] So to have 3 different colors of background, and I used layouts to achieve this, I would need 6 different layouts: TOTAL overkill.
There must be a better way...

From any cshtml file, you should be able to access the Layout shape. From pretty much anywhere else, you can still get to the Layout shape through WorkContextAccessor. Once you have a reference to the Layout shape, you can do Layout.Classes.Add("the-class-you-want").

Overriding Core Shapes - Orchard CMS

I currently have a Content Type called "News" which is very simple (No custom properties etc.). I am trying to style this Content type when it occurs on a page of a specific layout, in this case a "News" page.
So - I have the layout that a News page will inherit from (Layout-url-News.cshtml), however I cannot seem to get the Content to display or inherit from a template (I have tried creating alternates such as Zone-url-News.cshtml and Zone-Content-url-News.cshtml, however both result in having no content at all.)
I had create both of the mentioned alternates by hand, as Designer Tools was unable to generate an alternate (The relative virtual path 'Orchard.Core.Shapes.CoreShapes::Zone' is not allowed here)
Basically - I cannot figure out how to style the content found on a specific page, (Title, Tags, Date, Body) as the Content always seems to inheirit from the base shape.

If your point is to style content in a zone, u might find it easier to use css. The layout system makes it really easy to identify the elements your interested in styling by using css selectors.
for example
.aside1.news { ... }
That takes care of 80% of styling needs
Most of the remaining is taken care of by the placement.info file which allows you to indicate which fields and what order for contenttypes and viewstypes (summary and detail)
the remaining needs are address by overriding the contentitem.view.
But you seem to indicate that you want to set the style for a contenttype in a specific zone for a url. So... You have the same contentType in different zones at the same url? I cannot imagine what you are doing. :)
Long and short, it sounds like your focused on the zone but it might be more helpful to focus on the contenttype or better yet, css. I ran into the same thing with url alternates suggesting alternates that aren't valid. It seems weird that it suggests zone alternates. I don't think those those are allowed.

Resources