1

I want to use some CSS like this, but it doesn't seem to work in Inkscape. If I put it in the <style> tag, there's no effect, but it works when directly attached to the element.

.tag {
    transform: translate(10, 10);
}

1 Answer 1

4

As far as I know, Inkscape's transform attribute is not held within the <style> tag, but is appended to the SVG element directly itself.

It doesn't seem to be possible to see the effect of a CSS transform inside Inkscape. I don't know why it doesn't work. Could be a bug. Perhaps try opening the modified SVG in a browser instead.

I tried the following, and it seems to work in a browser (tested in Firefox), but it definitely does not work inside Inkscape. The element is displayed properly, but the translate doesn't move anything. This is just a Plain SVG saved from Inkscape, I also used the extension Merge Styles into CSS, to set up the css class for a green filled <rect> element. I edited the SVG in notepad++ to add the transform: translate CSS.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1">
    <style
       id="style1"><![CDATA[
.class1 {
  fill:#00ff00;
  transform: translate(20px, 20px);
}
]]></style>
  </defs>
  <g
     id="layer1">
    <rect
       class="class1"
       id="rect1"
       width="39.184959"
       height="39.184959"
       x="26.733662"
       y="41.382244" />
  </g>
</svg>
2
  • Translate also doesn't work if set directly on nested SVGs in InkScape... What a frustrating time waste having to find out about this :P
    – bad_coder
    Feb 4 at 18:54
  • 1
    @bad_coder I feel your pain. But nesting has always been problematic in Inkscape, particularly excessive nesting of groups, something you will sometimes find in SVGs created by other software. Sometimes it's best to do a deep ungroup, and make sure you only have a single group. It can avoid lots of issues.
    – Billy Kerr
    Feb 4 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.