今回はプロジェクト・ロゴとグループ・ロゴについて少々(一覧)。
Forrest では、プロジェクト・ロゴやグループ・ロゴは skinconf.xml ファイルの「skinconfig/project-logo/text()」や「skinconfig/group-logo/text()」を読み込んで、自動的に PNG ファイルを作成してくれます(自作の画像ファイルを使うことも可能)。 ただし、デフォルトの設定では、何故かプロジェクト・ロゴが見切れてしまってます(Forrest がバージョンアップしても修正されないのが謎)。
今回は、それの修正方法と、その他にグラデーションや色の変更方法を見ていきます。
★project.svg★
まずは、プロジェクト・ロゴとグループ・ロゴを設定しているファイルをみてみましょう。 これは、以下のパスで指定される SVG*1 ファイルです:
${ForrestSite}/src/documentation/content/xdocs/images/project.svg
${ForrestSite}/src/documentation/content/xdocs/images/group.svg
これらはどちらも同じような内容なので、ここでは project.svg の内容を見てみます(コメントは適当に省略):
<?xml version="1.0" standalone="no"?> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to You under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xsl:version="1.0" xmlns:for="http://apache.org/forrest" width="420" height="65" > <defs> <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1"> <stop style="stop-color:white" offset="0"/> <stop style="stop-color:lightgreen" offset="1"/> </linearGradient> <filter id="shadowFilter" filterUnits="objectBoundingBox" width="1.4" height="1.4"> <feGaussianBlur in="SourceAlpha" stdDeviation="2 2" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feComposite in="SourceGraphic" in2="offsetBlur" operator="over"/> </filter> </defs> <g filter="url(#shadowFilter)" fill="url(#gradient)"> <text x="100%" y="60%" style="font-size:24pt; font-family:Verdana ; text-anchor: end" > <for:project-name /> </text> </g> </svg>
★プロジェクト・ロゴの修正★
まずは、プロジェクト・ロゴの修正方法を。 拙者はあんまり SVG に詳しくないので(というか仕様書を読もうとして挫折した*2)、以下の方法は結構力業ですが、まぁ結果オーライってことで。
上記のサンプルに対して下表のような変更
変更する属性(への XPath 式) | 変更前の値 | 変更後の値 |
---|---|---|
svg/@width | 420 | 500 |
svg/g/text/@x | 100% | 80% |
を施すと、プロジェクト・ロゴは次のようになります(プロジェクト名*3は「Waman World」としています):
きちんと見切れないようになりました。
★グラデーションの変更★
project.svg には、コメントアウトされた形で2つのグラデーションが定義されています。 試しにこれらを使ったプロジェクト・ロゴを観てみましょう。
Linear Gradient
「Linear Gradient」は直線的なグラデーションです。 このグラデーションを使用するための変更は以下の通り:
変更する属性(への XPath 式) | 変更前の値 | 変更後の値 |
---|---|---|
svg/defs/linearGradient | コメントを外す | |
svg/g/@fill | url(#gradient) | url(#linearGradient) |
この結果、プロジェクト・ロゴは以下のようになります:
Radial Gradient
「Radial Gradient」は円形のグラデーションです。 このグラデーションを使用するための変更は以下の通り:
変更する属性(への XPath 式) | 変更前の値 | 変更後の値 |
---|---|---|
svg/defs/radialGradient | コメントを外す | |
svg/g/@fill | url(#gradient) | url(#radialGradient) |
この結果、プロジェクト・ロゴは以下のようになります:
★色の変更★
次の変更はグラデーションの端の色を変更しています。 同時にフォントサイズも変更してますが、これには特に意味なし。
変更する属性(への XPath 式) | 変更前の値 | 変更後の値 |
---|---|---|
svg/defs/linearGradient/stop/@style[@offset = 0]/@style | stop-color:white | stop-color:magenta |
svg/defs/linearGradient/stop/@style[@offset = 1]/@style | stop-color:lightgreen | stop-color:red |
svg/g/text/@style | font-size:24pt; font-family:Verdana ; text-anchor: end |
font-size:18pt; font-family:Verdana ; text-anchor: end |
変更結果は以下のようになります: