Skip to content

SVGMobject / manim doesn't support linear gradients #2112

Closed as not planned
Closed as not planned
@wiltzutm

Description

@wiltzutm

Dear devs,
first of all thank you for a great library. I'm not sure if this is a feature request or bug but here's some description of the issue I bumped into:

I tried to load a SVGMobject from svg file. I had used linear gradient in the svg file (created with inkscape, but saved as plain svg), but when tried to create the SVGMobject the manim raised an error that the object color is invalid. The color is defined as a reference to the linear gradient definition in the SVG file as follows: url(#linearGradient2323)
I have no idea does manim support gradients at all even at the rendering end. If not then this is actually a feature request eg. a lot more work.

If it's a bug, it probably has something to do with manim's SVG parsing (url or/and the gradient definition).

Expected behavior

Well the expected behaviour would be that I could load the svg file with the gradient color definition and use the loaded svg object in my animations...

How to reproduce the issue

  1. Create a svg file using inkscape/whatever editor and add a single object in it and fill it with a (linear) gradient color.
  2. Save it as plain svg file
  3. write a minimal "hello manim" code and try to load the said svg file using the SVGMobject ( SVGMobject("myfilename.svg") )
  4. compile the written code using manim
Code for reproducing the problem
import manim as mn

class MyAnim(mn.Scene):
    def construct(self):
        obj = mn.SVGMobject("test.svg")
        self.play(mn.FadeIn(obj))

Additional media files

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

<svg width="70.649391mm" height="53.670593mm" viewBox="0 0 70.649391 53.670593" version="1.1" id="svg870" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs867">
    <linearGradient id="linearGradient1039">
      <stop style="stop-color:#4092da;stop-opacity:1;" offset="0" id="stop1035" />
      <stop style="stop-color:#4092da;stop-opacity:0;" offset="1" id="stop1037" />
    </linearGradient>
    <linearGradient xlink:href="#linearGradient1039" id="linearGradient1041" x1="63.150944" y1="94.747299" x2="133.80032" y2="94.747299" gradientUnits="userSpaceOnUse" />
  </defs>
  <g id="layer1" transform="translate(-63.150944,-67.912003)">
    <rect style="fill:url(#linearGradient1041);fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round" id="rect953" width="69.649391" height="52.670593" x="63.650944" y="68.412003" rx="1.7550156" ry="1.7550156" />
  </g>
</svg>

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue:bugSomething isn't working... For use in issues

    Type

    No type

    Projects

    Status

    🆕 New

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions