Question

我试图建立道尔顿滤波器（即各种类型色盲的仿真），然而，我用于此的SVG完全失败。 Firefox会以背景颜色显示所有内容（但所有内容都会呈现，但绝对不可见），Chrome会正常显示该页面。

由于我正在读取数据库中的转换值，因此SVG由此Perl脚本生成：

#!/usr/bin/perl -wT -I /srv/www1/cgi-lib

use strict;
use DBI;
use helpers qw(aindex);

my $dbname = 'DBI:mysql:<dbname>';
my $dbuser = '<dbuser>';
my $passwd = '<dbpass>';

my $p_http_ver = $ENV{'SERVER_PROTOCOL'};

my $p_debug = 0;

if($p_debug)
  {
  print "Content-Type: text/plain; charset=utf-8\n\n";
  }

sub get_params
  {
my ($l_script, $l_paramstr) = split(/\?/, $ENV{'REQUEST_URI'});

  return undef if(!defined $l_paramstr);

my @l_paramlist = split(/[&;]/, $l_paramstr);
my $l_this;
my %l_params = ( );

  foreach $l_this (@l_paramlist)
    {
my ($l_var, $l_value) = split(/=/, $l_this);

    next if(!defined $l_value);

    $l_value =~ s/\+/ /g;
    $l_value =~ s/%([0-9a-fA-F]{2})/pack("C", hex($1))/eg;

    $l_params{$l_var} = $l_value;
    }

  return \%l_params;
  }

my $params = get_params();
my %matrix = ( );
my @valid_modes = ( 'normal', 'protanopia', 'protanomaly', 'deuteranopia', 'deuteranomaly', 'tritanopia', 'tritanomaly', 'achromatopsia', 'achromatomaly' );

foreach (@valid_modes)
  {
# Fill in the normal matrix: Default for database failures!
  $matrix{$_} = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ];
  }

my $p_mode = ${$params}{'mode'};
$p_mode = 'normal' if(!defined $p_mode);
$p_mode = 'normal' if(aindex(@valid_modes, $p_mode) == -1);

print "Content-Type: image/svg+xml; charset=utf-8\n";
print "Expires: -60s\n";
print "Pragma: no-cache\n" if($p_http_ver eq 'HTTP/1.0');
print "Cache-Control: no-cache, no-store, must-revalidate\n" if($p_http_ver eq 'HTTP/1.1');

# Empty line to end the header section...
print "\n";

my $dbh = DBI->connect($dbname, $dbuser, $passwd, { PrintError => 0, AutoCommit => 0 });
if($dbh)
  {
my $l_sth;
my @l_row;
my $l_i;

  $l_sth = $dbh->prepare(qq{select * from dalton});
  $l_sth->execute();

  while(@l_row = $l_sth->fetchrow_array)
    {
    for($l_i = 0; $l_i < @l_row - 1; $l_i++)
      {
      ${$matrix{$l_row[0]}}[$l_i] = $l_row[$l_i + 1];
      }
    }  

  $l_sth->finish();

  $dbh->disconnect();
  }

print <<"EOT";
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg>
<defs>
EOT

my $filter;

foreach $filter (@valid_modes)
  {
my $l_i = 0;

  print "<filter id=\"$filter\">\n";
  print "<feColorMatrix type=\"matrix\" values=\"";
  for($l_i = 0; $l_i < @{$matrix{$filter}}; $l_i++)
    {
    print " " if($l_i);
    print ${$matrix{$filter}}[$l_i];
    if($l_i % 4 == 3)
      {
      print " 0.000";
      print "," if($l_i < @{$matrix{$filter}} - 1);
      }
    }
  print "\" />\n";
  print "</filter>\n";
  }

print <<"EOT";
</defs>
</svg>
EOT

以下用于将此过滤器附加到body元素：

body {
  filter: url('/cgi-bin/svg/dalton.pl#normal'); /* substitute any other ID for "normal" here if required */
  }

在浏览器中单独调用脚本时，我得到文档结构（SVG没有CSS），并且在validator.w3.org验证它也没有显示任何错误。但是，一旦我将它包含在我的XHTML文档的CSS中，事情就开始变得混乱（不，-webkit-filter并不能使这件事适合Chrome，或者......）。

这里可能出现什么问题？现在，我没有看到森林里的树木。

编辑：该脚本生成以下输出：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg>
<defs>
<filter id="normal">
<feColorMatrix type="matrix" values="1.000 0.000 0.000 0.000 0.000, 0.000 1.000 0.000 0.000 0.000, 0.000 0.000 1.000 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="protanopia">
<feColorMatrix type="matrix" values="0.567 0.433 0.000 0.000 0.000, 0.558 0.442 0.000 0.000 0.000, 0.000 0.242 0.758 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="protanomaly">
<feColorMatrix type="matrix" values="0.817 0.183 0.000 0.000 0.000, 0.333 0.667 0.000 0.000 0.000, 0.000 0.125 0.875 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="deuteranopia">
<feColorMatrix type="matrix" values="0.625 0.375 0.000 0.000 0.000, 0.700 0.300 0.000 0.000 0.000, 0.000 0.300 0.700 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="deuteranomaly">
<feColorMatrix type="matrix" values="0.800 0.200 0.000 0.000 0.000, 0.258 0.742 0.000 0.000 0.000, 0.000 0.142 0.858 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="tritanopia">
<feColorMatrix type="matrix" values="0.950 0.050 0.000 0.000 0.000, 0.000 0.433 0.567 0.000 0.000, 0.000 0.475 0.525 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="tritanomaly">
<feColorMatrix type="matrix" values="0.967 0.033 0.000 0.000 0.000, 0.000 0.733 0.267 0.000 0.000, 0.000 0.183 0.817 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="achromatopsia">
<feColorMatrix type="matrix" values="0.299 0.587 0.114 0.000 0.000, 0.299 0.587 0.114 0.000 0.000, 0.299 0.587 0.114 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
<filter id="achromatomaly">
<feColorMatrix type="matrix" values="0.618 0.320 0.062 0.000 0.000, 0.163 0.775 0.062 0.000 0.000, 0.163 0.320 0.516 0.000 0.000, 0.000 0.000 0.000 1.000 0.000" />
</filter>
</defs>
</svg>

Answer 1

您的根SVG元素没有命名空间。你需要你的根元素

<svg xmlns="http://www.w3.org/2000/svg">

SVG过滤器根本不起作用

1 个答案: