SVGフィルタがまったく動作しません

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のどちらでも機能しません...）。

ここで間違っていますか？今は木の森が見えません。

EDIT：スクリプトは次の出力を生成します。

<?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">