storybook Storybook doesn't deal with external svg' defs node

Describe the bug Hi, guys! It's a quite strange error, but Storybook doesn't deal with external defs params from additional svg inside the same DOM window. More interesting to admit, that all works normally once defs params is inside svg icon itself.

To Reproduce Try to build the same DOM model to reproduce through Storybook. Where you shall have both independent svg defs and the main svg icon nodes.

Example:

<body class="d r sb-show-main">
    <div class="svgs_defs_container">
        <svg class="react_svgs_defs" style="width: 0px; height: 0px; position: absolute;">
            <defs class="react_svgs__filters">
                <filter id="defaultFilter">
                    <fedropshadow dx="0" dy="0.7" stddeviation="0.1" flood-color="#fff"></fedropshadow>
                </filter>
            </defs>
            <defs class="react_svgs__gradients">
                <lineargradient id="test" gradienttransform="rotate(90)" gradientunits="objectBoundingBox">
                    <stop offset="0" stop-color="black"></stop>
                    <stop offset="1" stop-color="white"></stop>
                </lineargradient>
            </defs>
        </svg>
    </div>
    <div id="root">
        <div style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;">
            <div style="margin: auto; max-height: 100%;">
                <svg xmlns="http://www.w3.org/2000/svg" class="default___25YWq " filter="url(#defaultFilter)" fill="green" stroke="#fff" stroke-width="0" width="24px" height="24px" viewBox="0 0 24 24">
                    <path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"></path>
                </svg>
            </div>
        </div>
    </div>
</body>

Expected behavior It was not the problem in Storybook v.4. Should work normally with external svg defs params node.

Code snippets My webpack config:

module.exports = {
  plugins: [
    new webpack.DefinePlugin(globals),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[name].[hash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)?$/,
        loader: 'awesome-typescript-loader',
        exclude: [/node_modules/],
        options: {
          configFileName: './tsconfig.json'
        }
      },
      // JSON
      {
        type: 'javascript/auto',
        test: /\.json$/,
        loader: 'json-loader'
      },
      // SCSS
      {
        test: /\.(s?)css$/,
        exclude: /\.cssmodule\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: false
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              data: '@import "index.scss";',
              includePaths: [path.resolve(__dirname, '../globals/styles')]
            }
          }
        ]
      },
      // CSSMODULE.SCSS
      {
        test: /(\.cssmodule|\.cssmodule\.scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[local]___[hash:base64:5]'
              }
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              data: '@import "index.scss";',
              includePaths: [path.resolve(__dirname, '../globals/styles')]
            }
          }
        ]
      },
      // FONTS
      {
        test: /\.woff(\?.*)?$/,
        loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.woff2(\?.*)?$/,
        loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2'
      },
      {
        test: /\.otf(\?.*)?$/,
        loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype'
      },
      {
        test: /\.ttf(\?.*)?$/,
        loader: 'url-loader?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?.*)?$/,
        loader: 'file-loader?prefix=fonts/&name=[path][name].[ext]'
      },
      // IMAGES
      {
        test: /\.svg(\?.*)?$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(png|jpg|webp)$/,
        loader: 'url-loader?limit=8192'
      }
    ]
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  }
}

System: - OS: macOS 10.14.6 - CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Binaries: - Node: 10.15.3 - /usr/local/bin/node - Yarn: 1.17.3 - /usr/local/bin/yarn - npm: 6.4.1 - /usr/local/bin/npm Browsers: - Chrome: 76.0.3809.100 - Firefox: 67.0.4 - Safari: 12.1.2 npmPackages: - @storybook/addon-actions: ^5.1.9 => 5.1.10 - @storybook/addon-backgrounds: ^5.1.9 => 5.1.10 - @storybook/addon-centered: ^5.1.9 => 5.1.10 - @storybook/addon-knobs: ^5.1.9 => 5.1.10 - @storybook/addon-links: ^5.1.9 => 5.1.10 - @storybook/addon-viewport: ^5.1.9 => 5.1.10 - @storybook/cli: ^5.1.9 => 5.1.10 - @storybook/react: ^5.1.9 => 5.1.10

Aug 13 '19 16:08 BiosBoy

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Sep 04 '19 08:09 stale[bot]

Still an issue...

Sep 05 '19 11:09 BiosBoy

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Sep 26 '19 12:09 stale[bot]

Still an issue...

Sep 26 '19 14:09 BiosBoy

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Oct 17 '19 18:10 stale[bot]

Still an issue...

Oct 17 '19 21:10 BiosBoy

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Nov 07 '19 22:11 stale[bot]

I'm getting this bug as well. Can this issue at least get a response?

Nov 12 '19 20:11 gptt916

@gptt916 Please upvote the issue with 👍 on the bottom of the issue description if you're experiencing this issue. There are 400+ open issues in the repo, with more incoming every day, and we don't have enough time to investigate all of them.

Nov 13 '19 00:11 shilman

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Dec 04 '19 02:12 stale[bot]

bump

Dec 12 '19 20:12 gptt916

Seems like the same issue happens even on the Storybook v.5...

Mar 09 '20 18:03 BiosBoy

Well, I found the issue finally.

It happens because storybook's inner SVG nodes (inside its DOM tree) don't look like they should be, eg: <lineargradient /> should be <LinearGradient /> or <linearGradient />.

This applies to all non-regular DOM elements (PascalCase, camelCase). Indeed, because SVG is not a regular DOM element.

So your turn guys now. @shilman

Mar 09 '20 19:03 BiosBoy

I'll take a look at this. Been meaning to learn more about core 🙂

May 26 '20 03:05 badsketch

Having some trouble understanding and reproducing this issue. Do you mean if I have:

// Filter.js
<svg>
   <def>
       <linearGradient id="test"/>
   </def>
</svg>

// Circle.js
<svg>
  <circle fill=url('#test')/>
</svg>

// App.js
<div>
   <Filter />
   <Circle /> // appears
</div>

// Circle.story.js
export const GradientCircle = () => <Circle /> // does not appear

Then the story won't show anything? Is the 'external svg' and def inside a different component? Could you provide a simplified example? Thanks for your patience!

May 27 '20 04:05 badsketch

I have the same issue right now. When I click the Docs tab, my gradient fills disappearing :(

Oct 24 '20 23:10 hayatbiralem

Still not working on 6.1.21

Jul 05 '21 19:07 VictorCamargo

Still an issue

Mar 08 '22 11:03 declanHinchcliffe

@shilman this is still an issue and was reported almost 3 years ago. This issue isn't just in the docs tab. Our gradient SVGs aren't even rendering in Storybook preview.

This prevents our organization from including anything with an SVG Gradient in Storybook as it produces malformed HTML.

Example of inline SVG Component markup correctly rendering in our Svelte app:

<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
  <path d="M56 27.16C56 9.378 44.59 0 27.824 0 11.06 0 0 9.378 0 27.16 0 44.853 10.27 56 27.824 56 45.467 56 56 44.853 56 27.16Z" fill="url(#a)"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M25.23 17.617c0-2.093-.682-3.467-4.372-3.467-3.73 0-4.41 1.374-4.41 3.467 0 1.963.6 3.73 4.41 3.73 3.77 0 4.372-1.767 4.372-3.73Zm14.32 0c0-2.093-.681-3.467-4.37-3.467-3.73 0-4.412 1.374-4.412 3.467 0 1.963.602 3.73 4.412 3.73 3.77 0 4.37-1.767 4.37-3.73Zm-23.93 10.69h24.757c-.184 9.314-4.73 13.802-12.37 13.802-7.487 0-12.187-4.318-12.386-13.802Z" fill="white"/>
  <defs>
    <linearGradient id="a" x1="28" y1="0" x2="28" y2="56" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FFB11B"/>
      <stop offset=".408" stop-color="#FD9290"/>
      <stop offset="1" stop-color="#8E7DFF"/>
    </linearGradient>
  </defs>
</svg>

The same inline SVG Component markup rendering in Storybook (broken/not displaying)

<svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
  <path d="M56 27.16C56 9.378 44.59 0 27.824 0 11.06 0 0 9.378 0 27.16 0 44.853 10.27 56 27.824 56 45.467 56 56 44.853 56 27.16Z" fill="url(#a)"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M25.23 17.617c0-2.093-.682-3.467-4.372-3.467-3.73 0-4.41 1.374-4.41 3.467 0 1.963.6 3.73 4.41 3.73 3.77 0 4.372-1.767 4.372-3.73Zm14.32 0c0-2.093-.681-3.467-4.37-3.467-3.73 0-4.412 1.374-4.412 3.467 0 1.963.602 3.73 4.412 3.73 3.77 0 4.37-1.767 4.37-3.73Zm-23.93 10.69h24.757c-.184 9.314-4.73 13.802-12.37 13.802-7.487 0-12.187-4.318-12.386-13.802Z" fill="white"/>
  <defs>
    <lineargradient id="a" x1="28" y1="0" x2="28" y2="56" gradientunits="userSpaceOnUse">
      <stop stop-color="#FFB11B"/>
      <stop offset=".408" stop-color="#FD9290"/>
      <stop offset="1" stop-color="#8E7DFF"/>
    </lineargradient>
  </defs>
</svg>

Note the lowercased SVG def elements/properties in Storybook (malformed HTML). This is as of 6.4.19.

May 20 '22 15:05 codingwithchris

@codingwithchris
Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

May 20 '22 15:05 shilman

Unfortunately, the repo we are having this issue in is private. I'll see what I can do about getting a repro set up... might take me some time as I'm currently overloaded.

May 20 '22 18:05 codingwithchris

bump

Jun 01 '23 21:06 gDub74

for us this change solves the issue: linearGradient and stopColor in the react app. lineargradient and stop-color in storybook preview-body.html

Sep 27 '23 13:09 adica

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

Oct 26 '23 01:10 github-actions[bot]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

Nov 02 '23 01:11 github-actions[bot]

storybook storybook copied to clipboard

Storybook doesn't deal with external svg' defs node

storybook
storybook copied to clipboard