When I embed a set of SVG graphics elements inline into HTML I have access to e.g. a group, say a chesspiece, via its id-attribute and can make it clickable, draggable and so on. Very nice and straight forward.
Now I remove the SVG code from the HTML and put it into a separate file which I include via
<embed src=... />
into the HTML. This works with no apparent difference in the rendering, but now I don't have access to the group via its id-attribute any more. With
<object data=...></object>
it is the same, by the way.
What am I missing?
If you have your script in the html file, you want something like this...
document.getElementById("embed_or_object_id").getSVGDocument().getElementById("element_id");
Related
I'm trying to embed an "clickable" image (Html code with links and shapes in it) to a new style sharepoint site. As the new one doesn't feature the option to edit the source code I tried to embed it via an iframe and the embed webpart. I managed to get some html code in the iframe via the srcdoc attribute but it isn't showing my image. The image is on the Sharepoint and the link also correct.
The Code:
<iframe srcdoc="<img src=https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png" width="400" height="400" "="" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07"></iframe>
The scr attribute is for the Sharepoint, because without it it doesn't accept the code.
Is it just not possible or did I something wrong?
What is stopping you from using the Image Web part?
Cheers
Truez
I know it has almost been 2 years but just in-case you still need the solution here it is:
The Solution:
Your img syntax is incorrect, you do not have a closing ">". Here is the proper syntax:
<iframe srcdoc="
<img src='https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png' width='400' height='400'/>" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07" width="iframe width here" height="iframe height here"></iframe>
Don't forget to include an iframe height and width as SharePoint requires it. Also remember when embedding any html code that requires ", you need to change it to ' instead as it will break the code.
I had an HTML Object tag like this:
<object class="someclass" id="someid" type="image/svg+xml" data="/relative/path/to/svg/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
This displayed my SVG image file fine. However, I wanted to move the SVG image file outside of the website root, so that users that do not have an account cannot see the file. So the data attribute would become a link to an intermediate page, which would construct the path to the SVG image and show it to the browser.
Now I have:
<object class="someclass" id="someid" type="image/svg+xml" data="/some/intermediate/page?image=/parameter/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
However, this does not display the image. When I use an Img tag instead, it does display when I right click it and select 'view image'. I tried things such as urlencode the query part of the URL, urlencoding the entire string, replacing the question mark for %3F, switching between Object and Img tags, but it does not seem to work.
Thanks for the help!
The problem ended up being HTTP header information. SVG images have to be served as header('Content-type: image/svg+xml'), and not just as XML
Though the OP has solved his problem, I came across a similar error in which the object tag was unable to render the data. The error turned out to be due to the X-Frame-Options, which in some cases is by default set to DENY.
If this is the case, you need to set to the appropriate value to be able to render.
I am creating a web page that accepts a hyperlink from the user and displays that page in an iframe. While rendering the page, I would like to show just the text and simple colors, thats it.
I would like to block all the media files like images and flash scripts from showing up.
If not an extensive one, for the starters, I would like to confine the scope to .gif, .jpeg, .jpg, .png, .swf.
Or does anyone know of a site with similar functionality?
You can write a simple dom parser and parse the page before show it in iframe. Then before showing it you can remove whatever you want.
your iframe whould like
<iframe src="your_parser.php"></iframe>
In your parser you can get the content from page using file_get_contents() or curl() it is your choise (i would use curl). Then you can remove the media you want.
If you're using Firefox, use the Adblock Plus extension. You can specify the types of items to block via a filter rule. An example (using Safaribooks) looks like this:
||techbus.safaribooksonline.com/static/201109-2191-techbus/images/6.0/*.jpg
However, if you're talking about incorporating functionality into your page to strip out a specific list of content-types, this approach wouldn't help you. You'd need to pull the html source and strip out the offending content-types.
also if you are using cms. you should be turn off bbcode image, and embed html
I am trying to embed a PDF in my webpage using this HTML tag
<embed src="instructions_after_extraction.pdf#navpanes=0" style="width:500px; height:375px;" />
If you have noticed, I have turned off the navigation panes using navpanes=0. However, is there a way to specify the available buttons in the toolbar? I'm already aware that toolbar=0 removes the toolbar from the display, but is there a way to turn off each button separately?
Regards.
I don't believe such control exists. However, on a side note, I would be vary of using the embed tag in the first place. An object tag with a number of parameters is the more appropriate solution.
The GUI settings with which a PDF needs to be displayed can be specified by the PDF-creation software too.
I don't know much css or html, so I have a question about taking html that looks like this:
html code paste and putting into another page.
The problem is when I just copy and paste this into a webpage is completely messes up the background (turns it black) and overwrites other settings. How can I take that exported html and css so that I can paste the code I exported from emacs into a webpage and not kill other settings?
Ideally it would appear just as it currently looks but in a little box inside the rest of the page.
Thanks.
You can use an IFrame
Put the desired HTML/CSS/etc in another file. Call this file2.html
In your main file, use an OBJECT element to embed this document.
<object data="file2.html" type="text/html">
View file2
</object>
This will create a "box" with your file inside. You can style the OBJECT element in any way you wish. Removing scrollbars, adjusting the width, etc.
If a browser does not support the OBJECT element, then they will see the link directly to the file.
You could also paste the code someplace like http://gist.github.com/ or http://pastie.org/ where they also give you some code to embed the code snippet in your site/weblog/etc.
You can see an example of the embedded code (for gist.github.com) here: http://github.com/blog/605-new-languages-highlighted