Дешевый / свободные платформы “Стиля” для [закрытых] веб-приложений
Если я правильно понял вопрос, то вам нужно иметь маску в виде прямоугольника фиксированного размера 10Х20, которая будет применяться к линии переменной длины.
В этом случае вы можете примерить комбинированную маску, одна часть которой будет непрозрачной fill = "black", а вторая часть будет прозрачной fill = "white" и будет отображать остальную часть линии.
<svg width="100" height="100">
<rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
<svg x="10" y="0" width="200" height="200" >
<defs>
<mask id="chopmask" maskUnits="userSpaceOnUse">
<rect width="20" height="100" x="0" y="0" fill="white"/>
<rect width="20" height="10" x="0" y="0" fill="black"/>
</mask>
</defs>
<path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
</svg>
</svg> Пример анимации процесса маскирования линии с помощью прямоугольника 10 x 20px
<svg width="100" height="100">
<rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
<svg x="10" y="0" width="200" height="200" >
<defs>
<rect x="0" y="0" width="20" height="10" stroke="none"/>
<mask id="chopmask" maskUnits="userSpaceOnUse">
<rect width="20" height="100" x="0" y="0" fill="white"/>
<rect width="20" height="10" x="0" y="0" fill="black">
<animate attributeName="y" dur="2s" values="-10;0" fill="freeze" />
</rect>
</mask>
</defs>
<path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
</svg>
</svg>3 ответа
Веб-дизайн С открытым исходным кодом является разумным местом для проверки.
Если Вы находитесь на направляющих, Baseapp стоит посмотреть на, если Вам нравятся 37 взглядов Сигналов.
Вы могли также попробовать SproutCore или Капучино платформы JS.
Вы собираетесь бороться, находя out-of-the-box 'удобство использования', все же. Знание, где, и как, для размещения различных элементов для создания связного целого, навык, а не что-то, что прибывает в шаблонную форму. Как Вы говорите, у Вас может быть набор симпатичных кирпичей, но Вам все еще нужен хороший каменщик для использования их. Но тем не менее, вышеупомянутые ссылки могут помочь.
Вы могли использовать YUI, его полученный довольно разумный API и ОЧЕНЬ завершены.