Градиент отображается по-разному в Inkscape (экспорт PNG) и в браузере
рук
Я создал изображение с помощью Inkscape. Вот как это выглядит в Inkscape и при экспорте в виде изображения PNG:
Но когда я пытаюсь отобразить его как SVG, градиент выглядит совершенно иначе:
Если для вас это не выглядит иначе, вот скриншот SVG-файла:
SVG-файл ( на GitHub ):
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="500"
viewBox="0 0 500 500"
id="svg2"
version="1.1">
<defs
id="defs4">
<linearGradient
inkscape:collect="always"
id="linearGradient7636">
<stop
style="stop-color:#ffab00;stop-opacity:1"
offset="0"
id="stop7664" />
<stop
id="stop4188"
offset="0.20623536"
style="stop-color:#ffa500;stop-opacity:1" />
<stop
style="stop-color:#ffab00;stop-opacity:1"
offset="0.2469174"
id="stop4190" />
<stop
style="stop-color:#ff8800;stop-opacity:1"
offset="1"
id="stop7666" />
</linearGradient>
<linearGradient
id="linearGradient7620"
osb:paint="solid">
<stop
style="stop-color:#fcff00;stop-opacity:1;"
offset="0"
id="stop7622" />
</linearGradient>
<radialGradient
xlink:href="#linearGradient7636"
id="radialGradient7642"
cx="250"
cy="250.00003"
fx="250"
fy="250.00003"
r="229.85291"
gradientTransform="matrix(1.3983125,1.4831815e-7,-1.507182e-7,1.4209396,-99.578086,-105.23497)"
gradientUnits="userSpaceOnUse"
spreadMethod="pad" />
<filter
style="color-interpolation-filters:sRGB;"
id="filter9316">
<feGaussianBlur
result="result1"
stdDeviation="3"
id="feGaussianBlur9318" />
<feBlend
in2="result1"
result="result5"
mode="multiply"
in="result1"
id="feBlend9320" />
<feGaussianBlur
in="result5"
result="result6"
stdDeviation="1"
id="feGaussianBlur9322" />
<feComposite
result="result8"
in2="result5"
in="result6"
operator="xor"
id="feComposite9324" />
<feComposite
in="result6"
result="fbSourceGraphic"
operator="xor"
in2="result8"
id="feComposite9326" />
<feSpecularLighting
in="fbSourceGraphic"
result="result1"
lighting-color="rgb(255,255,255)"
surfaceScale="2"
specularConstant="2.2"
specularExponent="55"
id="feSpecularLighting9328">
<fePointLight
x="-5000"
y="-10000"
z="20000"
id="fePointLight9330" />
</feSpecularLighting>
<feComposite
in2="fbSourceGraphic"
in="result1"
result="result2"
operator="in"
id="feComposite9332" />
<feComposite
in="fbSourceGraphic"
result="result4"
operator="arithmetic"
k2="2"
k3="1"
in2="result2"
id="feComposite9334" />
<feComposite
in2="result4"
in="result4"
operator="in"
result="result91"
id="feComposite9336" />
<feBlend
mode="darken"
in2="result91"
id="feBlend9338" />
</filter>
<pattern
patternUnits="userSpaceOnUse"
width="150.00683"
height="75.64963"
patternTransform="translate(-105.5802,590.28444)"
id="pattern9832">
<rect
y="2.7309999"
x="2.7309999"
height="70.18763"
width="144.54483"
id="rect9830"
style="opacity:1;fill:#ebee00;fill-opacity:0.69724767;fill-rule:nonzero;stroke:#000000;stroke-width:5.46199989;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</pattern>
<filter
id="filter9316-8"
style="color-interpolation-filters:sRGB;">
<feGaussianBlur
id="feGaussianBlur9318-0"
stdDeviation="3"
result="result1" />
<feBlend
id="feBlend9320-6"
in="result1"
mode="multiply"
result="result5"
in2="result1" />
<feGaussianBlur
id="feGaussianBlur9322-8"
stdDeviation="1"
result="result6"
in="result5" />
<feComposite
id="feComposite9324-0"
operator="xor"
in="result6"
in2="result5"
result="result8" />
<feComposite
id="feComposite9326-9"
in2="result8"
operator="xor"
result="fbSourceGraphic"
in="result6" />
<feSpecularLighting
id="feSpecularLighting9328-2"
specularExponent="55"
specularConstant="2.2"
surfaceScale="2"
lighting-color="rgb(255,255,255)"
result="result1"
in="fbSourceGraphic">
<fePointLight
id="fePointLight9330-6"
z="20000"
y="-10000"
x="-5000" />
</feSpecularLighting>
<feComposite
id="feComposite9332-7"
operator="in"
result="result2"
in="result1"
in2="fbSourceGraphic" />
<feComposite
id="feComposite9334-8"
in2="result2"
k3="1"
k2="2"
operator="arithmetic"
result="result4"
in="fbSourceGraphic" />
<feComposite
id="feComposite9336-2"
result="result91"
operator="in"
in="result4"
in2="result4" />
<feBlend
id="feBlend9338-7"
in2="result91"
mode="darken" />
</filter>
<pattern
id="pattern9832-3"
patternTransform="translate(-105.5802,590.28444)"
height="75.64963"
width="150.00683"
patternUnits="userSpaceOnUse">
<rect
style="opacity:1;fill:#ebee00;fill-opacity:0.69724767;fill-rule:nonzero;stroke:#000000;stroke-width:5.46199989;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect9830-3"
width="144.54483"
height="70.18763"
x="2.7309999"
y="2.7309999" />
</pattern>
</defs>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<cc:license
rdf:resource="https://creativecommons.org/licenses/by/4.0/" />
<dc:rights>
<cc:Agent>
<dc:title>rugk</dc:title>
</cc:Agent>
</dc:rights>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(0,-552.36219)">
<path
style="opacity:1;fill:url(#radialGradient7642);fill-opacity:1;stroke:#000000;stroke-width:15.67965698;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter9316)"
d="M 250.41797,3.1582031 23.300781,126.23828 22.880859,373.07812 249.58203,496.8418 476.69922,373.76172 477.11914,126.92188 Z m -0.71094,97.8652369 0,0.006 c 3.78018,0 7.60386,0.29655 11.45703,0.875 41.10089,6.16576 72.18274,40.63955 66.38414,70.45619 -5.7986,29.81664 -33.27979,55.97822 -40.0849,61.67271 -6.80511,5.69448 37.09529,164.94336 37.09529,164.94336 l -74.07421,0 -1.06836,0 -73.97657,0 c 0,0 46.18084,-156.80132 36.48594,-164.94336 -9.69491,-8.14204 -41.19767,-36.87188 -36.38828,-68.93554 4.80939,-32.06366 37.62649,-63.97482 74.16992,-64.07422 z"
transform="matrix(0.95665359,0,0,0.95665359,10.836603,563.19879)"
id="path4140" />
</g>
</svg>
Протестировано со следующими браузерами: Firefox 47.0.1 и браузером на основе Chromium с тем же результатом.
Так почему же это выглядит иначе? И как я могу это исправить?
Ответы (1)
рук
Итак, соавтор, наконец, исправил это . Проблема заключалась в том, что в градиенте использовались пиксели, которые, по-видимому, не могут быть отображены основными браузерами.
Поэтому изменение градиента на этот XML исправило это:
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient7636"
id="radialGradient7642"
cx="50%"
cy="50%"
fx="50%"
fy="50%"
r="40%"
spreadMethod="pad" />
Вот как это выглядит сейчас:
Скриншот
Однако, поскольку это довольно неожиданное поведение, я обнаружил ошибку в системе отслеживания проблем Inkscape . Если кто-то тоже столкнулся с этой проблемой, вы можете оставить комментарий или нажать «Также влияет...».
Как получить положение x/y нескольких точек на монтажной области
Экспорт SVG в EPS с 1 пикселем = 1 единице
Как автоматически экспортировать несколько ресурсов с разными разрешениями из одного файла SVG с помощью Inkscape?
Координаты групп в Inkscape
Экспорт ОГРОМНЫХ png/tiff/pdf из SVG
Inkscape: экспорт xml для каталога ресурсов для Android
Искажение градиента
Inkscape не экспортирует исключение режима наложения слоя в PDF
проблема с экспортом pdf в inkscape - штрих линии [закрыто]
Как я могу проанализировать это изображение SVG, загруженное из Интернета?
Сокови
рук