Databases
StackOverflow2013
Postsdbo
PODrawing SVG into Canvas and manipulating drawn elements using their IDs
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrawing SVG into Canvas and manipulating drawn elements using their IDs
    primarykey
    data
    text
    <p>I have an SVG file loaded into an <code>&lt;object&gt;</code> tag. I am using javascript to manipulate some elements within this svg. For example:</p> <pre><code>var theSvgXml = document.getElementById('theObject').contentDocument; theSvgXml.getElementById('theElementId').style.display = 'inline'; theSvgXml.getElementById('theElementId').style.fill = 'red'; theSvgXml.getElementById('anotherElement').style.display = 'none'; </code></pre> <p>This works perfectly and all was well. But i am wondering if the same thing can be done with canvas. I have read about kinetic js, fabric js, canvg js as well, and i saw the various methods of loading the svg file into the canvas either by the file directory, the xml or through an image.</p> <p>But after drawing this svg file into the canvas, can i manipulate the elements by their IDs?</p> <p>The SVG is created using Adove Illustrator, and each layer or group is given an id with can be accessed using css selectors. Again, can this be done in canvas after drawing the SVG onto it. (Please note that the SVG is HUGE and the only reason i am thinking about the canvas solution is because of the svg not showing the illustrator multiply effect to create a shadow)</p> <p>Any help will be highly appreciated. Thank you.</p> <p>Code Snippet:</p> <pre><code>&lt;g id="Pockets"&gt; &lt;g id="Pen__x26__Radio_Arm_Pocket" class="st791"&gt; … &lt;/g&gt; &lt;g id="Pen_Pocket_Arm" class="st791"&gt; … &lt;/g&gt; &lt;g id="Card_Zipper_Arm_Pocket" class="st791"&gt; … &lt;/g&gt; &lt;g id="Radio_Pocket_Arm_Pocket" class="st791"&gt; … &lt;/g&gt; &lt;g id="Angled_Chest_Pocket_Right" class="st791"&gt; … &lt;/g&gt; &lt;g id="Angled_Chest_Pocket_Left" class="st791"&gt; … &lt;/g&gt; &lt;g id="Angled_Chest_Pocket_left_and_Right" class="st791"&gt; … &lt;/g&gt; &lt;g id="Chest_Pocket_Right" class="st791"&gt; … &lt;/g&gt; &lt;g id="Chest_Pocket_Left" class="st791"&gt; … &lt;/g&gt; &lt;g id="Chest_Pocket_left_and_Right" class="st791"&gt; … &lt;/g&gt; &lt;g id="Tool_Pocket" class="st791"&gt; … &lt;/g&gt; &lt;g id="Cargo_x2F_Mobile_Pocket_Velcro" class="st791"&gt; … &lt;/g&gt; &lt;g id="Cargo_x2F_Mobile_Pocket_Zip" class="st791"&gt; … &lt;/g&gt; &lt;g id="Cargo_x2F_Mobile_Pocket_Button" class="st791"&gt; … &lt;/g&gt; &lt;g id="Cargo_Pocket_Velcro" class="st791"&gt; … &lt;/g&gt; &lt;g id="Cargo_Pocket_Button" class="st791"&gt; … &lt;/g&gt; &lt;g id="Cargo_Pocket_Zip" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_Right_Velcro" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_left_Velcro" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_left_and_Right_Velcro" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_Right_Velcro_Button" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_left_Velcro_Button" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_left_and_Right_Button" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_Right_Zip" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_left_Zip" class="st791"&gt; … &lt;/g&gt; &lt;g id="Back_Pocket_left_and_Right_Zip" class="st791"&gt; … &lt;/g&gt; &lt;/g&gt; </code></pre> <p>As you can see form the xml snippet after exporting the file from adobe illustrator, each group is set with an ID. How can preserve these in canvas as objects (as Fabrics.js suggests using getObjects() method)? Is there a way to achieve this? If yes, how can i reference these groups? Also, the shadow is a key issue and i do not want ot use flash. Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USM O H
    1. USM O H
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODrawing SVG into Canvas and manipulating drawn elements using their IDs
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PODrawing SVG into Canvas and manipulating drawn elements using their IDs
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODrawing SVG into Canvas and manipulating drawn elements using their IDs
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat do you mean by huge? Did you try to optimize the svg?
      singulars
      1. PODrawing SVG into Canvas and manipulating drawn elements using their IDs
      1. USpawel
    2. COI mean there is over 20,000 lines of xml. It is a complex drawing with a lot of details.
      singulars
      1. PODrawing SVG into Canvas and manipulating drawn elements using their IDs
      1. USM O H
    3. COYes, with Fabric.js, you can manipulate SVG children separately.
      singulars
      1. PODrawing SVG into Canvas and manipulating drawn elements using their IDs
      1. USkangax
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload