This is an example:
<svg>
<g ng-repeat="rect in rectList">
<rect ng-attr-fill="rect.fill"
ng-attr-x="rect.x"
ng-attr-y="rect.y"
ng-attr-width="rect.width"
ng-attr-height="rect.height"></rect>
</g>
</svg>
I want to add a <md-tooltip> to each of these rects. Can I do it somehow? I am talking about the Angular Material Tooltip specifically, not any other tooltip implementation from other libraries.
Try to wrap it in a div and apply the md-tooltip
<div ng-repeat="status in statuses">
<md-tooltip md-direction="right">
{{status.description}}
</md-tooltip>
<svg >
<rect width="300" height="100" >
</rect>
</svg>
</div>
Here is the working Sample
Related
I would like to use Glyphicon for my React Project. I followed this site https://www.golangprograms.com/reactjs-an-example-glyphicon-rating-star-component.html
for reference. It did not work. So I checked my react-bootstrap file in node_modules, there was no Glyphicon.
How can I import Glyphicon other than doing
<link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css">
this.
Two options:
Reference the bootstrap icon page and copy the raw SVG element:
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
Import and reference like so:
npm install bootstrap-icons
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#star-fill"/>
</svg>
I'm trying to add alignment buttons to the toolbar. I'm using the method of laying out the toolbar using html elements. What I'd like to know is if it's possible to have alignment buttons represented as discrete buttons on the toolbar instead of being in a dropdown.
All of the examples that I've seen so far use the dropdown approach. Is what I'm after even possible?
You can add a dropdown option as it's own button by adding a value attribute to it like so:
<button class="ql-align" value="center">
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
});
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<div id="toolbar">
<span class="ql-formats">
<button class="ql-align" value=""></button>
<button class="ql-align" value="center"></button>
<button class="ql-align" value="right"></button>
<button class="ql-align" value="justify"></button>
</span>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
I'd suggest using the shorthand in the js for the toolbar, so not using a custom html toolbar. Then by writing
toolbar: [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]
you can define 4 discrete alignment buttons as per the answer here by #jhchen. He also has a nice example here. Otherwise I'd assume you could achieve the same though html (based solely on looking at the source code the shorthand generates):
<span class="ql-formats">
<button type="button" class="ql-align" value="">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
<line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
<line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="center">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
<line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="right">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
<line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
</svg>
</button>
<button type="button" class="ql-align" value="justify">
<svg viewBox="0 0 18 18">
<line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
<line class="ql-stroke" x1="15" x2="3" y1="14" y2="14"></line>
<line class="ql-stroke" x1="15" x2="3" y1="4" y2="4"></line>
</svg>
</button>
</span>
However, I would honestly suggest you use the shorthand, it keeps it all nice and clean and it ensures it works. Furthermore, it still allows you to add custom buttons (check this)
You can use select tag with option for dropdown. Use select with class ql-align and its inside add each option with value attributes as "", "center", "right" and "justify" respectively.
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
});
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div id="toolbar">
<select class="ql-align">
<option value=""></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</div>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
Just add the following line to your Quill toolbar html and Quill will take care of the rest.
<select class="ql-align"></select>
How do you dynamically add an attribute directive to a pre-existing element?
I've tried the equivalent of:
<div class="container">
<svg class="canvas"> <!-- renders up to here -->
<custom-directive>
<g class="group"> <!-- directive template -->
<rect class="body"></rect>
<g class="content"></g>
</g>
</custom-directive>
</svg>
</div>
I like this technique, but as you all know, one of the great things about svg graphics is that you can re-size and re-use the same file. Is it possible to add a size variable to ng-include?
eg:
<div ng-include="'img/logo-rev.svg'" class="ng-scope" width="50">
The answer is to not specify a width or height in your SVG. Or if you do, make sure they are both set to "100%". Then as long as your SVG has a suitable viewBox attribute, it will scale to whatever size you make its parent.
.small {
width: 50px;
height: 50px;
}
.large {
width: 150px;
height: 150px;
}
<div class="small">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="green"/>
</svg>
</div>
<div class="large">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="green"/>
</svg>
</div>
Note that the two SVGs in the example above are identical.
I am new both to AngularJS and SVG so if i am doing something terribly wrong i apologize.
I am trying to create an SVG pattern with AngularJS:
Code fiddle:
http://jsfiddle.net/WFxF3/
Template:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="{{cubeWidth}}" height="{{cubeHeight}}" patternUnits="userSpaceOnUse">
<path d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<path d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>-->
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>
Controller:
'use strict';
angular.module('gridifyApp')
.controller('MainCtrl', function ($scope) {
var docWidth = document.width;
var columns = 12;
var cubeWidth = docWidth / columns;
var cubeHeight = 44;
$scope.cubeWidth = cubeWidth;
$scope.cubeHeight = cubeHeight;
});
It seems to work and yet I get a console error:
Any ideas why?
The problem is svg is being parsed before angular is able to do anything so the value with double curly braces is invalid before angular gets to it. Angular's team has added a way to define some kind of "delayed binding". You can use it by prefixing desired attribute with ng-attr-. It waits untill the binding evaluation is valid and adds real attribute with proper value.
In your case it would be:
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" ng-attr-width="{{cubeWidth}}" ng-attr-height="{{cubeHeight}}" patternUnits="userSpaceOnUse">
<path ng-attr-d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<path ng-attr-d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/>
<!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>-->
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>
There should be no errors anymore. Remember to update your angular version.
SVG parsing happens before AngularJS can set any variable. You might try to create the SVG programmatically:
SVGSVGElement reference on MDN
Programmatically creating an SVG image element with JavaScript